スムースなアニメーションはUIの使用感を高めます。Vueのトランジションシステムと関数型コンポーネントにより、アプリケーションで簡単に動きを制御することができます。ほとんどのコンポーネントはtransitionpropによって、トランジションを変更することができます。
以下に、簡単な例から複雑な例まで示します。
Slide x transitionは水平方向に移動します。
アニメーションはアプリケーションの$primary-transitionを利用します。
Scroll X トランジションは、水平方向に移動します。
Scroll Y トランジションは、垂直方向に移動します。
Vuetifyのコンポーネントの多くはtransitionプロパティを含んでいます。
FABトランジションの例は、v-speed-dialコンポーネントにあります。
Fadeトランジションの例はCarouselで見ることができます。
expandトランジションは、エクスパンションパネルとリストグループで使用されます。 v-expand-x-transitionで利用できる水平バージョンもあります。
シンプルなプロパティでトランジションのoriginを制御することができます。
複数のトランジションを使用すれば、簡単にToDoリストを作成することができます！
Vuetify のトランジションヘルパー関数を使用すると、カスタムトランジションを簡単に作成できます。この関数は Vue にインポートできるオブジェクトを返します。Vueの 関数型コンポーネント オプションを使用することによって、効率的にトランジションを作ることができます。
createSimpleTransition関数は引数としてnameを受け取ります。これはスタイルで利用するための名前となります。これはv-fade-transitionがどのように見えるかの例です。