🚗

【Tailwind和訳】TRANSITIONS & ANIMATION/Transition Timing Function

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

この記事について

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

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


Transition Timing Function

CSS トランジションのイージングを制御するユーティリティーです。

クラス プロパティ
ease-linear transition-timing-function: linear;
ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

使い方

要素のイージングカーブを制御するには、ease-{timing}ユーティリティを使用します。

Image from Gyazo

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

レスポンシブ

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

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

カスタマイズ

タイミングの値

デフォルトでは、Tailwind は 4 つの汎用的な遷移タイミング機能ユーティリティを提供しています。これらを変更、追加、削除するには、Tailwind のテーマコンフィグの transitionTimingFunction セクションをカスタマイズします。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
+       "in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)",
+       "out-expo": "cubic-bezier(0.19, 1, 0.22, 1)",
      },
    },
  },
}

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

バリアント

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

tailwind.config.js ファイルの variants セクションにある transitionTimingFunction プロパティを変更することで、transition-timing-function ユーティリティのために生成されるバリアントをコントロールすることができます。

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

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

無効化

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

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

Discussion

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