遷移遅延

Tailwind CSS version
v1.3.0+

CSS遷移の遅延を制御するためのユーティリティ。

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;

使用方法

delay-{amount}ユーティリティを使用して、要素の遷移遅延を制御します。

<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>

Responsive

特定のブレークポイントで要素の遷移遅延を制御するには、既存の遷移遅延ユーティリティに{screen}:プレフィックスを追加します。 たとえば、md:delay-500を使用して、中程度の画面サイズ以上でのみdelay-500ユーティリティを適用します。

Tailwindのレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

Customizing

Delay values

デフォルトでは、Tailwindは8つの汎用遷移遅延ユーティリティを提供します。Tailwindテーマ設定のtransitionDelayセクションをカスタマイズして、これらを変更、追加、または削除します。

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

デフォルトテーマのカスタマイズについてはテーマのカスタマイズをご覧ください。

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはtransition-delay utilitiesのために作られます。

あなたはどのバリアントがtransition-delay utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのtransitionDelayプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

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

無効にする

もしtransition-delay utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのtransitionDelay propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!