React：クラスの付け替えによるCSSの変更にトランジションを当てる方法

Question

実現したいこと

• ↓のようにactiveのtrue/falseでcssのクラスを変更するときに、Transitionでゆっくり色が変わるようにしたいです。

<h1 className={active ? red : ""}>Hello world</h1>

試したこと

• ClassNameにTailwindでtransitionを付与してみました
  →Transitionは適用されずに一瞬で文字色が切り替わってしまいました。。

どこかにTransitionを書けば良いと思うのですが、どのように記述するのが適切でしょうか？ボールドテキスト

Answer 1

この回答はGPT-4による自動生成回答です

以下のように、Tailwind CSS の transition クラスと duration クラスを使用して、色の変更をゆっくり行うことができます。

import React, { useState } from "react";
import "./styles.css";
import "tailwindcss/tailwind.css";

export default function App() {
  const [active, setActive] = useState(false);

  return (
    <div className="App">
      <h1
        className={`transition duration-500 ${active ? "text-red-500" : ""}`}
      >
        Hello world
      </h1>
      <button onClick={() => setActive(!active)}>Toggle</button>
    </div>
  );
}

この例では、transition クラスと duration-500 クラスを使用して、色の変更が 500ms かけて行われるようにしています。active の状態に応じて、text-red-500 クラスが適用されるかどうかが切り替わります。