# 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

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:09/17/2021, 9:17:47 AM