Javascriptでアニメーションを簡単に使えるmove.jsを使ってみる #JavaScript

簡単な記法で、アニメーションをすることができます。
中では、transition-delayとかを使っているようです。

インストール

bower i move.js

iと書くとinstallを略すことができます。

普通にやると怒られる！

中でonload時にdocument.bodyを呼び出しているので、
普通にscriptタグで読み込んでもエラーが出てしまいます。
次のように読み込みましょう。

document.addEventListener("DOMContentLoaded", () => {
  var movejs = document.createElement("script");
  movejs.src = "bower_components/...."; // move.jsのインストール先
  document.head.appendChild(movejs);
});

アニメーションしよう！

まず構文。

move("クエリ")/*..... アニメーション処理 */.end();

move()からend()の間に処理を書くわけです。
処理は、公式サイトにたくさん書いてあります。
ここでは一部を紹介します。

cssプロパティを指定する

.set("CSSプロパティ名", 値)

例:

move("div.box")
  .set("opacity", 0)
  .end();

アニメーションの時間を指定する

.duration("秒数")

例:

move("div.box")
  .set("opacity", 0)
  .duration("1s");
  .end();

移動する

.translate(x, y)

例:

move("div.box")
  .translate(100, 80)
  .duration("0.5s")
  .end();

アニメーションが終わった後に実行する

.then()/* 処理 */.pop()

例:

move("div.box")
  .translate(100, 80)
  .then()
  .set("opacity", 0)
  .pop()
  .end();

例では、移動をしてから、opacityを0に指定します。

便利なので、使ってみてください！