【JavaScript】AniJSが楽で軽快で素晴らしかったので紹介

jQueryに依存しないPureJavaScriptで動作する、animationを付与するプラグイン「AniJS」が軽快でかなりいい感じだったのでご紹介します。

AniJSとは

JavaScriptのプラグイン

CSS3で要素にAnimationをつける

Animationの種類は役80種類

プロパティ付与だけで発火可能！

AniJSの導入方法

ダウンロード

公式サイトからソースをダウンロードして、お使いのサーバーにアップロード。

<script src="anijs-min.js"></script>
<link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css">

cssに関しては、公式にこのURLから参照するように書いてあるのでこれで問題ないかと。

もし不安な場合は、こちらからダウンロードしてお使いください。

ちなみに、そもそもダウンロードが面倒な場合は下記。

<script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs-min.js"></script>
<link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css">

利用方法

aniJSの利用方法はとても簡単で、あとはHTMLで下記のように記述するだけです。

<div data-anijs="if: click, do: flip animated, to: .me" class="box me">me</div>

if=イベント発火のタイミング,do=発火させるAnimationの名前,to=対象となる要素

click発火

See the Pen 【AniJS】JavaScriptで簡単にanimationできるプラグイン by nkmrkisk (@rekid) on CodePen.

mouseover発火

See the Pen 【AniJS】JavaScriptで簡単にanimationできるプラグイン２ by nkmrkisk (@rekid) on CodePen.

利用可能なAnimation

デフォルトの設定（上記で外部参照しているcss）ですべてのAnimationが動くのかは確認していないのですが、おそらくAniCollectionで紹介されているすべてのanimationが実装可能です。
何より数が80件弱と多いのが嬉しくて、個人的にお気に入りな理由です。（特に「flip」の挙動が良い！）

AniCollection

備忘

公式のDocumentを簡単に見た印象だと、scrollなどでも発火するはずなのですがうまく発火しませんでした。
僕の記述というか、認識不足だと思うので後々の課題にしよう。。
何かわかる方がいたら教えていただけると嬉しいです＞＜！