【React × Tailwind CSS】transitionを使ってhoverでアニメーションさせる方法

2023.02.12

環境

  • react @18.2.0
  • tailwindcss @3.2.4
  • heroicon/react @2.0.15

CSSでアニメーションを付ける際に使用するtransitionについてご紹介します。

transitionの働き

transitionがどんな働きをするか、具体的な使用例を見るわかりやすいと思うので、以下の動画を見てみてください。

上のボタンがtransitionを使用してない場合、下のボタンが使用している場合です。

上のボタンはカーソルhover時に、即座に背景色が変わっているのに対し、

下のボタンはゆっくりと背景色が変わっているのがわかると思います。

このゆっくりと変化するのは、transitionを使用しているからです。

それではコードを見ていきましょう！

コードの比較

import { PlusIcon } from "@heroicons/react/24/outline";

const NewChat = () => {
  return (
    <>
      <div className="border border-gray-700 rounded-lg px-5 py-3 text-sm flex items-center justify-center
      space-x-2 cursor-pointer text-gray-300 hover:bg-gray-700/70">
        <PlusIcon className="h-4 w-4" />
        <p>New Chat</p>
      </div>

      <div className="border border-gray-700 rounded-lg px-5 py-3 text-sm flex items-center justify-center
      space-x-2 cursor-pointer text-gray-300 transition-all duration-500 ease-out hover:bg-gray-700/70">
        <PlusIcon className="h-4 w-4" />
        <p>New Chat</p>
      </div>
    </>
  );
};

export default NewChat;

2つの違いは以下の部分です。

transition-all duration-500 ease-out

これが何を意味しているのが詳しく見ていきましょう！

transition

transition-all はアニメーションの対象が全て（all）であることを意味しています。

この全てとは、CSSの全てという意味で、colorやbackgroundなどを意味します。

tailwindcssでは他にも、transitionの対象のCSS propertyを指定する方法があり、詳しくは以下に記載されています。

Transition Property - Tailwind CSS
Utilities for controlling which CSS properties transition.
tailwindcss.com

duration

trantionの時間、つまり変化する時間を指定するものであり、単位はmsecです。

Transition Duration - Tailwind CSS
Utilities for controlling the duration of CSS transitions.
tailwindcss.com

ease

easeには、liner, in, out, in-out の4種類があり、動きの加減速を指定するものです。

それぞれの加減速の仕方の違いは以下のようになっています。

  • linear： 等速で変化する
  • ease-in： 徐々に加速する
  • ease-out： 徐々に減速する
  • ease-in-out： 加速してから減速する
Transition Timing Function - Tailwind CSS
Utilities for controlling the easing of CSS transitions.
tailwindcss.com

そして、この transion, duration, easeの3つはセットで使用しますのでセットで覚えておきましょう！

以上、ご覧頂きありがとうございました。

コメント