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

2016-01-01

TOC

簡単な記法で、アニメーションをすることができます。

中では、transition-delayとかを使っているようです。

インストール

1	$ bower i move.js

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

中でonload時にdocument.bodyを呼び出しているので、
head タグ内で scriptタグで読み込むとエラーが出てしまいます。

解決策は２つあります。

おすすめは webpack ですが、手軽ではないので、
body タグと js から動的に読み込む方法を紹介します。

<body>
  <!-- ... -->
  <script type="text/javascript" src="<インストール先>/bower_components/move.js/move.min.js"></script>
  <!-- ... -->
</body>

次のように読み込みましょう！

まず構文。

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

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

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

例:

1
2
3

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

1	.duration("秒数")

例:

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

1	.translate(x, y)

例:

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

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

例:

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

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

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