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

Демо

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

Рекомендуемый способ скрытия элементов до завершения анимации 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
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
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

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