移行期間

Tailwind CSS version
v1.2.0+

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

Class reference

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

使用方法

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

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

Responsive

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

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

Customizing

Duration values

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

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

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!