Рекомендуемый способ скрытия элементов до завершения анимации Tailwind CSS?

Демо

Текст расширяется по ширине вместе с боковой панелью, когда в идеале переход должен быть более плавным. Может быть, задерживается, чтобы обмануть глаз, думая, что он появляется только тогда, когда полностью развернут.

Как я должен думать о достижении этого?

<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 визуализируется условно, он может не иметь возможности анимироваться, потому что он может не существовать при изменении состояния. Для более плавного перехода, возможно, стоит скрыть их, а не удалять?

John Li 19.11.2022 04:56

Как отобразить после того, как div полностью развернут?

Ryan 19.11.2022 05:07

Я думаю, в зависимости от того, какой переход показать здесь, например, если элементы исчезают, чем это было бы opacity, или если они скользят слева, может быть translateX?

John Li 19.11.2022 05:15

@ДжонЛи Хорошо! Становимся ближе. `transition-opacity delay-100 easy-in ${open ? "opacity-100" : "opacity-0"}` Любые советы по улучшению? К сожалению, анимация на выходе сейчас плохая, но анимация на входе в порядке.

Ryan 19.11.2022 06:23

Я думаю, что при закрытии бокового ящика задержка должна быть в обратном порядке, где transition-opacity не имеет задержки и сначала срабатывает, затем панель перемещается. Если этот путь кажется вам достойным внимания, я постараюсь написать ответ для деталей.

John Li 19.11.2022 06:31

Хотелось бы увидеть вашу версию!

Ryan 19.11.2022 06:33
Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
1
6
92
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я сделал упрощенный пример, надеюсь, поможет найти хорошее решение.

Здесь используется подход с перекрестной задержкой, чтобы сделать переход плавным при открытии и закрытии ящика.

Есть состояние 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 потрясающая. Это именно то, что мне было нужно

Ryan 19.11.2022 08:36

Другие вопросы по теме