我正在創建一個自定義面板，它應該從右到左進入，然后保持在其主體的任何寬度。我想讓這個面板進入它的容器。在我的例子中，它在“盒子”div 內。我無法達到同樣的目的。有人可以幫忙嗎。
.box {
height: 600px;
width: 600px;
background-color: white;
padding: 10px;
border: solid 3px black;
}
.panel {
position: absolute;
left: 0;
width: 180px;
top: 0;
bottom: 0;
box-shadow: 0px 0px 15px black;
background: white;
padding: 10px;
transform-origin: 100% 50%;
transform: translateX(-100%);
transition: -webkit-transform 0.2s ease-in-out;
outline: 0;
}
.panel:target {
transform: translateX(0%);
}
function App() {
const [drawerOpen, setDrawerOpen] = useState(false);
return (
<div className="box">
{drawerOpen ? (
<SlideDrawer show={drawerOpen} {...{ setDrawerOpen }} />
) : null}
<button
onClick={() => {
setDrawerOpen(!drawerOpen);
}}
>
Click me!
</button>
</div>
);
}
export default function SlideDrawer({ setDrawerOpen, show }) {
return <div className="panel">I am sliding</div>;
}
沙盒： https ://codesandbox.io/s/react-sliding-pane-v2-4xuj57 ?file=/src/index.js:144-504
uj5u.com熱心網友回復：
更新
已更新，以便在單擊按鈕時切換panel打開和關閉。
事實證明，transition在此用例中處理雙向影片更容易。我從原始答案中洗掉了一些不相關的代碼。
唯一的權衡是保持SlideDrawer開箱即用的渲染，這樣它就可以雙向影片。
這是完成的沙箱。
希望這會有所幫助！
示例：（替換index.js檔案）
import React, { useState } from "react";
import ReactDOM from "react-dom";
import SlideDrawer from "./SlideDrawer.jsx";
import "./styles.css";
function App() {
const [drawerOpen, setDrawerOpen] = useState(false);
return (
<div className="box">
<SlideDrawer show={drawerOpen} />
<button onClick={() => setDrawerOpen((prev) => !prev)}>Click me!</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
示例：（替換SlideDrawer.jsx檔案）
import React from "react";
import "./styles.css";
export default function SlideDrawer({ show }) {
return <div className={`panel ${show && "slidein"}`}>I am sliding</div>;
}
示例：（替換styles.css檔案）
.box {
height: 600px;
width: 600px;
background-color: white;
padding: 10px;
border: solid 3px black;
position: relative;
overflow: hidden;
}
.panel {
position: absolute;
right: 0;
width: 180px;
top: 0;
bottom: 0;
box-shadow: 0px 0px 15px black;
background: white;
padding: 10px;
outline: 0;
transform: translateX(120%);
transition: all 0.2s ease-in-out;
}
.slidein {
transform: translateX(0);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/535640.html