Текст расширяется по ширине вместе с боковой панелью, когда в идеале переход должен быть более плавным. Может быть, задерживается, чтобы обмануть глаз, думая, что он появляется только тогда, когда полностью развернут.
Как я должен думать о достижении этого?
<div className = "flex flex-col items-center space-y-4 w-full mt-8">
<Logo open = {open} />
{open && <div className = "h-auto w-3/4 text-xs text-slate-400">This looks weird when the line is super long</div>}
....
Должен ли я прикрепить отсрочку? transition-delay
ничего не делает во внутреннем div.
как отобразить после того, как div полностью развернут?
Я думаю, в зависимости от того, какой переход показать здесь, например, если элементы исчезают, чем это было бы opacity
, или если они скользят слева, может быть translateX
?
@ДжонЛи Хорошо! Становимся ближе. `transition-opacity delay-100 easy-in ${open ? "opacity-100" : "opacity-0"}` Любые советы по улучшению? К сожалению, анимация на выходе сейчас плохая, но анимация на входе в порядке.
Я думаю, что при закрытии бокового ящика задержка должна быть в обратном порядке, где transition-opacity
не имеет задержки и сначала срабатывает, затем панель перемещается. Если этот путь кажется вам достойным внимания, я постараюсь написать ответ для деталей.
Хотелось бы увидеть вашу версию!
Я сделал упрощенный пример, надеюсь, поможет найти хорошее решение.
Здесь используется подход с перекрестной задержкой, чтобы сделать переход плавным при открытии и закрытии ящика.
Есть состояние open
, которое управляет ящиком. На ящике-контейнере:
open ? "w-52 delay-0" : "w-12 delay-300"
И внутренний элемент использует обратное значение задержки, что-то вроде:
open ? "opacity-100 delay-300" : "opacity-0 delay-0"
Таким образом, во время открытия и закрытия перехода родительские и дочерние элементы будут иметь правильно упорядоченную анимацию.
Живая демонстрация здесь: stackblitz
import React, { useState } from "react";
import "./App.css";
const list = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"];
const ListItem = ({ open, text, index }) => {
return (
<li className = {`bg-teal-100 h-12 flex justify-end`}>
<div
className = {`${
open ? "w-24" : "w-12"
} flex justify-center align-center p-3 transition-all duration-300 ease-in-out`}
>
{index + 1}
</div>
<div
className = {`${
open ? "opacity-100 delay-300" : "opacity-0 delay-0"
} flex justify-center align-center p-3 flex-1 transition-all duration-300 ease-in-out`}
>
{text}
</div>
</li>
);
};
const SlideDrawer = ({ open }) => {
return (
<div
className = {`${
open ? "w-52 delay-0" : "w-12 delay-300"
} absolute left-0 top-0 bottom-0 transition-all duration-300 ease-in-out overflow-hidden flex justify-start bg-pink-200`}
>
<div className = {`w-52 flex flex-col justify-start align-end`}>
<div
className = {`${
open ? "w-52 p-6 delay-300" : "w-12 p-3 delay-0"
} h-72 flex flex-col justify-start align-center transition-all duration-300 ease-in-out `}
>
<figure
className = {`${
open ? "w-40 h-40 delay-300" : "w-6 h-6 delay-0"
} transition-all bg-teal-100 rounded-full duration-300 ease-in-out`}
></figure>
</div>
<ul className = "w-full flex flex-col list-none">
{list.map((item, index) => (
<ListItem key = {item} open = {open} index = {index} text = {item} />
))}
</ul>
</div>
</div>
);
};
function App() {
const [drawerOpen, setDrawerOpen] = useState(false);
return (
<>
<div className = "w-full flex justify-end">
<button
className = "m-6 p-3 rounded-lg bg-slate-300"
onClick = {() => setDrawerOpen((prev) => !prev)}
>
Open drawer
</button>
</div>
<SlideDrawer open = {drawerOpen} />
</>
);
}
export default App;
Вау, круто, спасибо большое! Демонстрация stackblitz потрясающая. Это именно то, что мне было нужно
Если внутренний div визуализируется условно, он может не иметь возможности анимироваться, потому что он может не существовать при изменении состояния. Для более плавного перехода, возможно, стоит скрыть их, а не удалять?