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

Usage

Vuetify comes with over 10 custom css animations that can be applied to numerous components or your own custom use-case

API

Examples

Slide X transitions

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

Slide Y transitions

アニメーションはアプリケーションの$primary-transitionを利用します。

Scroll X transitions

Scroll X transitions continue along the horizontal axis.

Scroll Y transitions

Scroll Y transitions continue along the vertical axis.

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 on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise