Функция времени перехода

Справочник классов по умолчанию

Класс	Свойства
ease-linear	transition-timing-function: linear;
ease-in	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Применение

Для управления кривой плавности элемента используйте утилиты ease-{timing}.

<button class="transition ease-in duration-700 ...">Наведи на меня</button>
<button class="transition ease-out duration-700 ...">Наведи на меня</button>
<button class="transition ease-in-out duration-700 ...">Наведи на меня</button>

Адаптивность

Чтобы управлять функцией времени перехода элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите функции времени перехода. Например, используйте md:ease-in-out, чтобы применить утилиту ease-in-out только для средних размеров экрана и выше.

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Значения времени

По умолчанию Tailwind предоставляет четыре универсальные утилиты с функцией синхронизации перехода. Вы изменяете, добавляете или удаляете их, настраивая раздел transitionTimingFunction в конфигурации вашей темы Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transitionTimingFunction: {
+         'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
+         'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
        }
      }
    }
  }

Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.

Варианты

По умолчанию, только responsive варианты создаются для утилит transition-timing-function.

Вы можете контролировать, какие варианты создаются для утилит transition-timing-function для изменения свойства transitionTimingFunction в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       transitionTimingFunction: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения transition-timing-function, Вы можете полностью отключить их, установив для transitionTimingFunction свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     transitionTimingFunction: false,
    }
  }