Just-in-Time: The Next Generation of Tailwind CSS
Tailwind CSS on GitHub

过渡延迟

用于控制 CSS 过渡延迟的功能类。

Default class reference

Class
Properties
delay-75transition-delay: 75ms;
delay-100transition-delay: 100ms;
delay-150transition-delay: 150ms;
delay-200transition-delay: 200ms;
delay-300transition-delay: 300ms;
delay-500transition-delay: 500ms;
delay-700transition-delay: 700ms;
delay-1000transition-delay: 1000ms;

Usage

使用

使用 delay-{amount} 功能类来控制某个元素的过渡延迟(transition-delay)属性。

<button class="transition delay-150 duration-300 ease-in-out ...">Hover me</button>
<button class="transition delay-300 duration-300 ease-in-out ...">Hover me</button>
<button class="transition delay-700 duration-300 ease-in-out ...">Hover me</button>

响应式

要在特定的断点处控制元素的过渡-延迟,请在任何现有的过渡-延迟实用程序中添加 {screen}: 前缀。例如,使用 md:delay-500 来应用 delay-500 功能,只适用于中等以上的屏幕尺寸。

关于 Tailwind 的响应式设计功能的更多信息,请查看响应式设计文档。

自定义

Delay values (延迟值)

By default, Tailwind provides eight general purpose transition-delay utilities. You change, add, or remove these by customizing the transitionDelay section of your Tailwind theme config.

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transitionDelay: {
+         '0': '0ms',
+         '2000': '2000ms',
        }
      }
    }
  }

主题定制文档中了解更多关于定制默认主题的信息。

变体

默认情况下, 针对 transition-delay 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 transitionDelay 属性来控制为 transition-delay 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

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

禁用

如果您不打算在您的项目中使用 transition-delay 功能,您可以通过在配置文件的 corePlugins 部分将 transitionDelay 属性设置为 false 来完全禁用它们:

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