Переместите элемент справа налево, как панель, используя CSS
Я создаю пользовательскую панель, которая должна входить справа налево, а затем оставаться на любой ширине своего тела. Я хочу, чтобы эта панель попала внутрь своего контейнера. В моем случае это внутри div "box". Я не могу добиться того же. Может кто-нибудь помочь здесь.
.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
@Йоги, верно. Ответ Джона заставляет его плавно переходить. Но необходимо добавить выдвижной переход.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
ОБНОВИТЬ
Обновлено, чтобы при нажатии кнопки он открывал и закрывал 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);
}
@ li97 Я тоже только что заметил и обновил пример, надеюсь, он будет ближе к желаемому результату.
Благодарю. когда я нажимаю «Щелкни меня» в первый раз, он анимируется и появляется. Как я могу убрать его с помощью анимации, скажем, при нажатии кнопки. Прямо сейчас он просто исчезает, я тоже хочу анимацию при движении
@ li97 Понятно, но при этом вам придется управлять другим состоянием exiting и визуализировать panel (но вне поля зрения, просто за пределами коробки). Это было бы нормально?
Я думал, что того же можно добиться с помощью CSS, точно так же, как скольжение при переходе. Можете ли вы показать мне свой подход к реагированию? Я думаю, панель уже условно визуализирована, поэтому, когда состояние ложно, ее удаляют.
@ li97 Да, именно, потому что, если условие для рендеринга panel выключено, анимация выхода не будет, потому что panel ее больше не существует. Но позже я все равно обновлю свой подход к этому.
большое спасибо мой человек. Пожалуйста, дайте мне знать, если есть какой-либо способ добиться этого с помощью условного рендеринга панели, а не постоянно.
Ваш вопрос: как сделать переход css в двух направлениях? Глядя на свой CodePent, панель выдвигается нормально, но затем защелкивается без перехода.