🦒
【React】CSSTransitionのclassNamesプロパティで簡単アニメーション実装
はじめに
こんにちは、うさぎです。
今回は、Reactアプリケーションでアニメーションを実装する際に便利なCSSTransitionのclassNamesプロパティについて解説します。
想定読者
- Reactの基本的な概念を理解している方
- アプリにアニメーションを追加したい方
- CSSTransitionを使い始めたばかりの方
classNamesプロパティとは？
アプリケーションにアニメーションを追加する際、要素の表示/非表示の遷移をスムーズに行いたいケースが多いと思います。CSSTransitionのclassNamesプロパティを使うと、そんなアニメーションを簡単に実装できます！
具体的な使い方
まず、以下のようなコンポーネントを作成します：
import { CSSTransition } from 'react-transition-group';
import './styles.css';
function AnimatedComponent() {
const [isVisible, setIsVisible] = useState(false);
return (
<>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle
</button>
<CSSTransition
in={isVisible}
timeout={300}
classNames="fade"
unmountOnExit
>
<div className="content">
Hello, Animation!
</div>
</CSSTransition>
</>
);
}
次に、CSSファイルでアニメーションを定義します：
/* fade-enter: 開始時 */
.fade-enter {
opacity: 0;
}
/* fade-enter-active: アニメーション中 */
.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
/* fade-exit: 終了時 */
.fade-exit {
opacity: 1;
}
/* fade-exit-active: 終了アニメーション中 */
.fade-exit-active {
opacity: 0;
transition: opacity 300ms ease-in;
}
ポイント解説
-
classNames="fade": プレフィックスとなる文字列を指定します。この例では"fade"を指定したので、
fade-enterやfade-exitなどのクラスが自動生成されます。 - timeout={300}: アニメーションの持続時間をミリ秒で指定します。CSSのtransitionの時間と合わせましょう。
- unmountOnExit: このプロパティを指定すると、非表示時にDOMから要素が完全に削除されます。
まとめ
classNamesプロパティを使うことで、以下のメリットがあります：
- アニメーションの状態管理を自動化できる
- CSSでアニメーションを定義できるので見通しが良い
- 複数の要素で同じアニメーションを再利用しやすい
最初は少し複雑に感じるかもしれませんが、基本的なパターンを押さえれば、様々なアニメーションに応用できます。ぜひ、実際に試してみてください！
Discussion