今日はjavascriptを使ってアニメーション付きでリストを並び替えてみたいと思います。
何が出来るのか
up,downボタンをクリックするとアニメーションで移動し、移動したDOMを入れ替えます。 ※ chromeでのみ動作確認してるのでchromeで見てください
See the Pen RWbXYE by genki (@genki0406) on CodePen.
解説
細かい説明はソース見てください。 大きな流れは以下のとおりです。
- 入れ替える先のDOM要素の位置を取ってきます
- transitionとtransformを使ってそれぞれの位置までアニメーションで移動させます
- webkitTransitionEndを使い、アニメーション終了のイベントをキャッチします
- アニメーションが終わったら実際のDOMの位置を入れ替えます
- そのままではtransform後の位置でDOMが入れ替わってしまうのでtransformをクリアしてあげます
