ITANDI TECH BLOG

イタンジのスタッフブログです。イベントや技術情報などを発信しています。

javascriptでアニメーション付けてリストを並び替えてみる

今日はjavascriptを使ってアニメーション付きでリストを並び替えてみたいと思います。

何が出来るのか

up,downボタンをクリックするとアニメーションで移動し、移動したDOMを入れ替えます。 ※ chromeでのみ動作確認してるのでchromeで見てください

See the Pen RWbXYE by genki (@genki0406) on CodePen.

解説

細かい説明はソース見てください。 大きな流れは以下のとおりです。

  • 入れ替える先のDOM要素の位置を取ってきます
  • transitionとtransformを使ってそれぞれの位置までアニメーションで移動させます
  • webkitTransitionEndを使い、アニメーション終了のイベントをキャッチします
  • アニメーションが終わったら実際のDOMの位置を入れ替えます
  • そのままではtransform後の位置でDOMが入れ替わってしまうのでtransformをクリアしてあげます