🚗

【Tailwind和訳】TRANSITIONS & ANIMATION/Transition Duration

2021/10/25に公開約2,500字

この記事について

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

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


Transition Duration

CSS トランジションの持続時間を制御するユーティリティーです。

クラス プロパティ
uration-75 transition-duration: 75ms;
uration-100 transition-duration: 100ms;
uration-150 transition-duration: 150ms;
uration-200 transition-duration: 200ms;
uration-300 transition-duration: 300ms;
uration-500 transition-duration: 500ms;
uration-700 transition-duration: 700ms;
uration-1000 transition-duration: 1000ms;

使い方

duration-{amount}ユーティリティーを使用して、要素のトランジションデュレーションを制御します。

Image from Gyazo

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

レスポンシブ

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

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

カスタマイズ

継続時間の値

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

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

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

バリアント

デフォルトでは、transition-duration ユーティリティーには responsive バリアントのみが生成されます。

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

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

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

無効化

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

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

Discussion

ログインするとコメントできます