Motion

スムースなアニメーションはUIの使用感を高めます。Vueのトランジションシステムと関数型コンポーネントにより、アプリケーションで簡単に動きを制御することができます。ほとんどのコンポーネントはtransitionプロパティによって、トランジションを変更することができます。

Usage

Slide x transitionは水平方向に移動します。

API

Name
group
Default
false
Type
boolean

Framework.Transitions.

Name
hide-on-leave
Default
false
Type
boolean

Framework.Transitions.

Name
leave-absolute
Default
false
Type
boolean

Framework.Transitions.

Name
mode
Default
undefined
Type
string

Framework.Transitions.

Name
origin
Default
'top center 0'
Type
string

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がどのように見えるかの例です。

Edit this page | language on Github