Блог

Главная - Вопросы по программированию - Как связать преобразования с помощью TailwindCSS?

Как связать преобразования с помощью TailwindCSS?

#javascript #reactjs #tailwind-css

Вопрос:

Я хочу связать несколько преобразований в цепочку для достижения анимационного эффекта.

Преобразования состоят из 3 частей:

  1. Начальное состояние x=0, поворот -45 градусов
  2. x= -2px, поворот 0 градусов, длительность 300 мс, задержка 0
  3. x=0, поворот 45 градусов, продолжительность 300 мс, задержка 300 мс (так что он начнется через 2)

Я попытался просто перечислить переводы по порядку, но это не работает:

 const openingAnimation = "rotate-0 translate-x-0.5 delay-300 duration-300 rotate-45 translate-x-0"
const initialRotation = "-rotate-45"'

<div className={`absolute h-px w-3 bg-white text-white last:ml-2 
                transform ease-in-out duration-300 
                ${toggled ? openingAnimation : initialRotation}`}
/>

Нужно ли мне делать это с помощью Javascript и функции тайм-аута, которая добавит третью анимацию?

Метки: