動きの長さを、意味から決める

Transition は、要素の表示と非表示を滑らかにつなぐ仕組みです。ただし、動きを足すこと自体が目的ではありません。何が変わったのかを伝えるために、時間と方向を決めます。

リストの並び替えや、モーダルの開閉では、動きがないと変化を見失いやすくなります。一方で、動きが長すぎると待たされている感覚が出ます。短く、意味のある動きを選びましょう。

押さえたい点

1. 01変化を伝えるために動かす
2. 02時間を短く保つ
3. 03並び替えと開閉で使い分ける