Vuetify

ショップ

企業向け

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

Vuetifyには10を超えるカスタムcssアニメーションが付属しており、多数のコンポーネントまたは独自のカスタムユースケースに適用できます。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

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

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

Scroll X トランジションは、水平方向に移動します。

Scroll Y トランジションは、垂直方向に移動します。

Vuetifyのコンポーネントの多くはtransitionプロパティを含んでいます。

FABトランジションの例は、v-speed-dialコンポーネントにあります。

Fadeトランジションの例はCarouselで見ることができます。

expandトランジションは、エクスパンションパネルとリストグループで使用されます。 v-expand-x-transitionで利用できる水平バージョンもあります。

シンプルなプロパティでトランジションのoriginを制御することができます。

複数のトランジションを使用すれば、簡単にToDoリストを作成することができます!

Vuetify のトランジションヘルパー関数を使用すると、カスタムトランジションを簡単に作成できます。この関数は Vue にインポートできるオブジェクトを返します。Vueの 関数型コンポーネント オプションを使用することによって、効率的にトランジションを作ることができます。

createSimpleTransition関数は引数としてnameを受け取ります。これはスタイルで利用するための名前となります。これはv-fade-transitionがどのように見えるかの例です。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!