面倒な設定不要で手軽にアニメーションエフェクトを付与してくれるライブラリ・「AutoAnimate」

AutoAnimate

AutoAnimateは面倒な設定不要で手軽にアニメーションエJavaScriptライブラリです。学習コストもほぼ必要なくCSSを書く必要もありません。

React、Vue、SvelteやVanillaでも使えて記述も簡単です。例えばVanillaなら以下のように書きます。

<ul id="myList">
  <!-- ここにリスト -->
</ul>

<script type="module">
  import autoAnimate from './js/autoAnimate.js'
  autoAnimate(document.getElementById('myList'))
</script>

読み込むだけでアニメーションエフェクトを加えてくれる、というものではありますが、勿論一定条件があって、DOMに子要素が追加された場合、削除された場合、移動された場合に適応される、というものになります。

大半のDOM操作に自動でアニメーションエフェクトが追加出来てCSSも編集しなくて済むので工数削減に貢献してくれるかなと思います。とはいえ、ある程度の調整は必要でしょうけど、まぁそれでも楽できそうですね。ライセンスはMIT。

AutoAnimate