Motion
スムースなアニメーションはUIの使用感を高めます。Vueのトランジションシステムと関数型コンポーネントにより、アプリケーションで簡単に動きを制御することができます。ほとんどのコンポーネントはtransitionプロパティによって、トランジションを変更することができます。
API
Framework.Transitions.
Framework.Transitions.
Framework.Transitions.
Framework.Transitions.
Framework.Transitions.
Examples
Slide X transitions
Slide x transitionは水平方向に移動します。
Slide Y transitions
アニメーションはアプリケーションの$primary-transitionを利用します。
Scale transition
Vuetifyのほとんどのコンポーネントはtransitionプロパティを含んでいます。
Fade transition
フェードはCarouselでも見ることができます。
Expand transition
The expand transition is used in Expansion Panels and List Groups. There is also a horizonal version available with v-expand-x-transition.
Custom Origin
シンプルなプロパティでトランジションのoriginを制御することができます。
Todo list
複数のトランジションを使用すれば、簡単にToDoリストを作成することができます！
Create your own
Vuetifyのトランジションヘルパー関数を使用すると、簡単に独自のトランジションを作成することができます。この関数はVueにインポート可能なオブジェクトを返却します。Vueの関数型コンポーネントを使用することによって、効率的にトランジションを作ることができます。
createSimpleTransition関数は引数としてnameを受け取ります。これはスタイルで利用するための名前となります。これはv-fade-transitionがどのように見えるかの例です。