# Transitions
スムーズなアニメーションはUIを素晴らしくするのに役立ちます。 Vue のトランジションシステムと再利用可能な関数型コンポーネントを使用すると、アプリケーションの動きを簡単に制御できます。 ほとんどのコンポーネントは、トランジション transition プロパティを介してトランジションを変更することができます。
# 使い方
Vuetifyには10を超えるカスタムcssアニメーションが付属しており、多数のコンポーネントまたは独自のカスタムユースケースに適用できます。
# API
# サンプル
# Props
# カスタムOrigin
シンプルなプロパティでトランジションのoriginを制御することができます。
# その他
# Expand x
expandトランジションは、Expansion Panelやリストグループで使用されます。 v-expand-x-transition で利用できる水平バージョンもあります。
# Fab
FABトランジションの例は、v-speed-dial コンポーネントにあります。
# Fade
Fadeトランジションの例はCarouselで見ることができます。
# Scale
Vuetifyのコンポーネントの多くには、 transition プロパティが含まれており、独自のプロパティを指定することができます。
# Scroll x
Scroll X トランジションは、水平方向に移動します。
# Scroll y
Scroll Y トランジションは、垂直方向に移動します。
# Slide x
Slide x transitionは水平方向に移動します。
# Slide y
アニメーションはアプリケーションの$primary-transitionを利用します。
# Todo リスト
複数のトランジションを使用すれば、簡単にToDoリストを作成することができます！
# 独自のトランジションを作成する
Vuetifyのトランジションヘルパー機能を使用すると、独自のカスタムトランジションを簡単に作成できます。 この関数は、Vue にインポートできるオブジェクトを返します。 Vue の 関数型コンポーネント オプションを使用すると、可能な限り効率的にトランジションを行うことができます。 関数をインポートするだけです:
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition'
const myTransition = createSimpleTransition('my-transition')
Vue.component('my-transition', myTransition)
createSimpleTransition 関数の引数1つで、name を受け取ります。 これは、定義するスタイルでフックできる名前になります。 以下は、 v-fade-transition がどのように見えるかの例です。
.fade-transition
&-leave-active
position: absolute
&-enter-active, &-leave, &-leave-to
transition: $primary-transition
&-enter, &-leave-to
opacity: 0