§16-04Motion

FLIP animation

要素の位置変化を滑らかな移動として見せる。

並び替えや追加で要素が飛ぶ動きを追えるようにする。一覧やグリッドの変化で、どこへ移ったか分からなくなる問題に効く。

実装のポイント

First で位置を記録し、Last で新位置を測り、差分を Invert した transform から Play で 0 に戻す。transform のみを動かすので reflow を伴わず滑らかになる。