【Tailwind和訳】TRANSITIONS & ANIMATION/Transition Delay

この記事について

この記事は、TRANSITIONS AND ANIMATION/Transition Delayの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

---

Transition Delay

CSS トランジションの遅延を制御するユーティリティ。

クラス	プロパティ
delay-75	transition-delay: 75ms;
delay-100	transition-delay: 100ms;
delay-150	transition-delay: 150ms;
delay-200	transition-delay: 200ms;
delay-300	transition-delay: 300ms;
delay-500	transition-delay: 500ms;
delay-700	transition-delay: 700ms;
delay-1000	transition-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>

レスポンシブ

特定のブレークポイントで要素のトランジション・ディレイを制御するには、既存のトランジション・ディレイ・ユーティリティーに {screen}: というプレフィックスを加えます。例えば、md:delay-500 を使うと、中程度のスクリーンサイズ以上でのみ delay-500 ユーティリティを適用できます。

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

カスタマイズ

遅延の値

デフォルトでは、Tailwind は 8 つの汎用トランジション・ディレイ・ユーティリティーを提供しています。これらを変更、追加、削除するには、Tailwind のテーマコンフィグの transitionDelay セクションをカスタマイズします。

tailwind.config.js

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

デフォルトのテーマをカスタマイズする方法については、テーマのカスタマイズに関するドキュメントで詳しく説明しています。

バリアント

デフォルトでは、transition-delay ユーティリティーにはレスポンシブバリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある transitionDelay プロパティを変更することで、トランジション・ディレイ・ユーティリティー用に生成されるバリアントをコントロールすることができます。

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します。

tailwind.config.js

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

無効化

プロジェクトでトランジション・ディレイ・ユーティリティーを使用する予定がない場合は、設定ファイルの corePlugins セクションで transitionDelay プロパティを false に設定することで、完全に無効化することができます。

tailwind.config.js

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