遷移プロパティ

Tailwind CSS version
v1.2.0+

どのCSSプロパティが遷移するかを制御するためのユーティリティ。

Class reference

Class
Properties
.transition-nonetransition-property: none;
.transition-alltransition-property: all;
.transitiontransition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
.transition-colorstransition-property: background-color, border-color, color, fill, stroke;
.transition-opacitytransition-property: opacity;
.transition-shadowtransition-property: box-shadow;
.transition-transformtransition-property: transform;

使用方法

transition-{properties}ユーティリティを使用して、変更時に遷移するプロパティを指定します。

<button class="transition duration-500 ease-in-out bg-blue-500 hover:bg-red-500 transform hover:-translate-y-1 hover:scale-110 ...">
  Hover me
</button>

Prefers-reduced-motion

motion-safeおよびmotion-reduceバリアントを使用して、条件付きでアニメーションとトランジションを適用できます。

<button class="transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none ...">
  Hover me
</button>

これらのバリアントはデフォルトでは有効になっていませんが、tailwind.config.jsファイルのvariantsセクションで有効にできます。

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    transitionProperty: ['responsive', 'motion-safe', 'motion-reduce']
  }
}

詳細については、バリアントドキュメントをご覧ください。

Responsive

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

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

Customizing

Property values

デフォルトでは、Tailwindは、7つの一般的なプロパティの組み合わせに対して遷移プロパティユーティリティを提供します。 Tailwindテーマ設定のtransitionPropertyセクションをカスタマイズして、これらを変更、追加、または削除します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transitionProperty: {
+         'height': 'height',
+         'spacing': 'margin, padding',
        }
      }
    }
  }

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!