Css transition duration: transition-duration — CSS: Cascading Style Sheets

 
 
 
 
 Переключатель 
 
   
 
  
 
 Здравствуйте 👋 
 
  
 
 
 
 

будет переходить на 500 миллисекунд при входе и 500 миллисекунд при выходе.

Если вы хотите настроить продолжительность специально для входа и выхода, вы можете сделать это следующим образом:

 
 
 
 x-transition:enter.duration.500ms 
 
 x-transition:leave.duration .400ms 
 
 > 
 

Настройка задержки

Вы можете отложить переход с помощью модификатора . delay следующим образом:

В приведенном выше примере переход и вход и выход из элемента задерживаются на 50 миллисекунд.

Настройка непрозрачности

По умолчанию Alpine x-transition применяет переход масштаба и непрозрачности для достижения эффекта «затухания».

Если вы хотите применить только переход непрозрачности (без масштаба), вы можете сделать это следующим образом:

Настройка масштаба

Аналогично .opacity модификатор, вы можете настроить x-transition ТОЛЬКО на масштаб (но не прозрачность перехода), например так:

Модификатор также предлагает возможность настроить свои значения масштаба И его исходные значения:

 
 
 .. x-transition.scale.80> 
 

Вышеприведенный фрагмент будет масштабировать элемент вверх и вниз на 80%.

Опять же, вы можете настроить эти значения отдельно для входных и выходных переходов, например:

 
 
  
 x-transition:enter.scale.80 
 
 x-transition:leave.scale.90 
 
 > 
 

Чтобы настроить начало перехода шкалы, вы можете использовать .origin модификатор:

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

Как вы уже догадались, возможные значения для этой настройки: сверху , снизу , слева и справа .

При желании вы также можете комбинировать два исходных значения. Например, если вы хотите, чтобы исходная точка шкалы была «вверху справа», вы можете использовать: . origin.top.right в качестве модификатора.

Для прямого контроля над тем, что входит в ваши переходы, вы можете применять классы CSS на разных этапах перехода.

В следующих примерах используются служебные классы TailwindCSS.

 
 
 
 
 Переключатель 
 
   
 
 
 
 x-show="open " 
 
 x-transition:enter="transition easy-out duration-300" 
 
 x-transition:enter-start="opacity-0 scale-90" 
 
 x-transition:enter-end="opacity-100 масштаб-100" 
 
 x-transition:leave="продолжительность перехода-300" 
 
 x-transition:leave-start="opacity-100 масштаб-100" 
 
 x-transition:leave-end="opacity-0 scale-90" 
 
 >Привет 👋
 
 
 
 
 

Привет 👋

6 Директива	Описание
: введите	Применяется на протяжении всей фазы входа.
: ввод-старт	Добавлено до вставки элемента, удалено через один кадр после вставки элемента.
:ввод-конец	Добавлен один кадр после вставки элемента (при этом enter-start удален), удаляется по окончании перехода/анимации.
: оставить	Применяется на протяжении всей фазы ухода.
:пуск-старт	Добавляется сразу при срабатывании перехода на выход, удаляется через один кадр.
:конец	Добавлен один кадр после срабатывания перехода перехода (в то же время отпуск-старт удален), удаляется по окончании перехода/анимации.

← x-для

x-эффект →

Подсветка кода с помощью Torchlight

Атомарные классы перехода позволяют быстро применять свойства перехода к элементу. Вы можете изменить продолжительность перехода, свойство или задержку элемента.

Вы можете запускать переходы CSS напрямую с помощью псевдоклассов, таких как :hover , которые активируются при наведении курсора мыши, :focus , который активируется, когда пользователь нажимает на элемент ввода или нажимает на него, или active , когда пользователь щелкает элемент .

Вы также можете вызвать переход CSS с помощью JavaScript, добавив или удалив класс.

Класс	Выход	Определение
.т	длительность перехода: .1 с; свойство перехода: все; функция синхронизации перехода: облегчение; задержка перехода: 0 с;	Применение стиля перехода по умолчанию к элементу.
.т-медленный	продолжительность перехода: 0,25 с;	Замедлить переход по умолчанию до 0,25 с.
.т-фаст	продолжительность перехода: 0,05 с;	Ускорить переход по умолчанию до 0,05 с.
.t-не установлен	свойство перехода: нет;	Удаление свойств перехода из элемента.
.т-бг	свойство перехода: цвет фона;	Переход свойства фона элемента.
. t-непрозрачность	свойство перехода: непрозрачность;	Изменение свойства непрозрачности элемента.
.т-тень	свойство перехода: box-shadow;	Переход свойства тени блока элемента.
.t-задержка	задержка перехода: 0,25 с;	Применение задержки перехода к элементу.
.t-delay-unset	задержка перехода: 0 с;	Удалить задержку перехода из элемента.

Базовый переход применяет к элементу функцию синхронизации длительности по умолчанию.