【Next.js】個人的に良かったtailwindcssでのアニメーション実装

こんにちは、
エンジニア歴７ヶ月のざまです。

みなさんは、cssライブラリは何をお使いでしょうか？
私は断然、tailwindcssです。
理由は、

• 自由度が広い
• 公式のドキュメントがめちゃくちゃくわかりやすい
• tailwindで作られている教材が多い

などなど、、、
tailwind＝バニラcss化しています。
ただ、アニメーションは今までほとんど使ってこなかったので、
アニメーションの勉強がてらtailwindを生かした組み合わせを色々試してみたので
それをメモがてら書いていきます。

結論ですが、
私はtailwindの標準のCustomizing your themeが使いやすいと思いました。
tailwindconfigに独自でアニメーションを追加する方法です。

以下参考
https://tailwindcss.com/docs/animation
https://qiita.com/akioqiita/items/d5726b00ce9d594b4c95

後、Tailanimistaっていう神サイト見つけました。
アニメーションの動きが事前にわかるし、そのままコピペできます。
Tailanimi
但し、これだけだと前回の記事でも書いたような画面に入った時だけ発火する様なやつができないです。
普通にIntersectionObserverを使って行う方法もありますが、良さげなライブラリを見つけたので
組み合わせて使ってみました。

以下参考
https://github.com/thebuilder/react-intersection-observer

手順

1,Tailanimistaで適当にコピペしてきてtailwind.config.jsに追加

//tailwind.config.js

theme: {
    extend: {
      animation: {
        "slide-top": "slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both"
    },
    keyframes: {
        "slide-top": {
            "0%": {
                transform: "translateY(100px)",
                opacity:0,
            },
            to: {
                transform: "translateY(0)",
                opacity:1,
            }
        }
    }
    },
  },

2,FadeInコンポーネント作成

//Fadein.tsx

import { ReactNode } from "react";
import { useInView } from "react-intersection-observer";

const FadeIn = ({ children }: { children: ReactNode }) => {
  const { ref, inView } = useInView({
    // オプション
    rootMargin: "-20px", // ref要素が現れてから20px過ぎたら
    triggerOnce: true, // 最初の一度だけ実行
  });
  return (
    <div ref={ref} className={`${inView && "animate-slide-top"} `}>
      {children}
    </div>
  );
};

export default FadeIn;

3,親から呼ぶ

import FadeIn from "../components/FadeIn"; 
...
<FadeIn>
        <div className="w-40 h-40 bg-blue-500"></div>
</FadeIn>

これだけで画面内に入ったらフェードインが作れます。
FadeInコンポーネントで囲めば、全てそのタイミングで発火するので
便利ですね。