💆‍♀️

zero-configでアニメーションを実装する

2022/10/16に公開約2,500字

はじめに

Zenn初投稿になります🔰 (記事を書くこと自体初です)

年間目標に技術記事5つ書くことを決めていたので、そろそろ何か書かなければと焦っていました。
GitHubでスターを付けていたものから紹介できそうなライブラリがないか探し、今回はその中から1つ抜粋して紹介記事を書こうと思います。

紹介するライブラリ

auto-animate

  • zero-configでアニメーションを実装できる
  • React/Svelte/Vue/Angular/vanillaJS サポート
  • ESMでのみ動作する

https://auto-animate.formkit.com/
https://github.com/formkit/auto-animate

使用方法

インストール

# yarn
yarn add @formkit/auto-animate
# npm
npm install @formkit/auto-animate
# pnpm
pnpm add @formkit/auto-animate

要素の追加・削除に対してアニメーションをつける

useAutoAnimateを使用する

フックが用意されていて、とてもシンプルに実装できます。

useAutoAnimateからは、Refオブジェクトとアニメーション使用可否の更新関数の2つが受け取れます。

App.tsx
import { useAutoAnimate } from "@formkit/auto-animate/react";
import { useState } from "react";

export const App = () => {
  const [ref] = useAutoAnimate<HTMLUListElement>();
  const [items, setItems] = useState([1, 2, 3]);

  const onAddItem = () => {
    setItems((prev) => [...prev, Math.max(...prev) + 1]);
  };

  const onDeleteItem = (deleteItem: number) => {
    setItems((prev) => prev.filter((item) => item !== deleteItem));
  };

  return (
    <div>
      <ul ref={ref}>
        {items.map((item) => (
          <li key={item}>
            <span>{item}</span>
            <button onClick={() => onDeleteItem(item)}>削除する</button>
          </li>
        ))}
      </ul>

      <button onClick={onAddItem}>追加する</button>
    </div>
  );
};

ユーザー側でアニメーションを停止させるような機能をつける場合、更新関数を実行してあげるだけで良さそうです。

const [ref, setEnabled] = useAutoAnimate<HTMLUListElement>();

setEnabled(false); // アニメーションを停止させる

オプションについて

useAutoAnimate()の引数に入れてあげると簡単に設定できます。オプションもシンプルですね。

https://github.com/formkit/auto-animate/blob/3bc8098c04067775a0e8d51e70e37155313e8a70/src/index.ts#L581-L596

注意点

スクロールコンテンツ内で使用する場面

現在スクロールコンテンツ内ではアニメーションがうまく動作しません。私もこの挙動に遭遇しました。
https://github.com/formkit/auto-animate/issues/16

しかし、スクロール対応のPRが出ているようなので、この問題は近いうちに解消されるかもしれません。
https://github.com/formkit/auto-animate/pull/30

アニメーションの種類は豊富ではない

要素を移動させたり回転させたりするような用途には合いません。他のライブラリにするかCSSを書くことになりそうです。

他のアニメーションライブラリをざっくり調べてみました。(React)

https://www.framer.com/docs/
https://react-spring.dev/
https://www.react-reveal.com/
https://react-move-docs.netlify.app/

所感

これくらい簡単に設定できると時間もかからないので良いと思いました。局所的ですが少しだけアプリをリッチにしたい時に取り入れてみてもいいかなと思いました。

また、VueやAngularはディレクティブが用意されていて、さらに気軽に導入できそうです。

最後まで読んでいただきありがとうございました🙏

出来心で遊んでみました

ネストされたルーティングにアニメーションしてみたら意外とスムーズに動きました😇

Discussion

ログインするとコメントできます