Свойство перехода

Применение

Используйте утилиты transition-{properties}, чтобы указать, какие свойства должны переходить при изменении.

Предпочительно уменьшенное движение

Вы можете условно применять анимацию и переходы, используя варианты motion-safe и motion-reduce:

<button class="transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none ...">
  Наведи на меня
</button>

Эти варианты не включены по умолчанию, но вы можете включить их в разделе variants вашего файла tailwind.config.js:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    transitionProperty: ['responsive', 'motion-safe', 'motion-reduce']
  }
}

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

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

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

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

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

Значения свойств

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

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transitionProperty: {
+         'height': 'height',
+         'spacing': 'margin, padding',
        }
      }
    }
  }

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

Варианты

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

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

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

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

Отключение

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

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