Store

For Enterprise

Smooth animations help make a UI feel great. Using Vue's transition system and re-usable functional components, you can easily control the motion of your application. Most components can have their transition altered through the transition prop.

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

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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

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

Scroll X transitions continue along the horizontal axis.

Scroll Y transitions continue along the vertical axis.

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

フェードはCarouselでも見ることができます。

The expand transition is used in Expansion Panels and List Groups. There is also a horizonal version available with v-expand-x-transition.

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

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

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

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

Ready for more? Continue reading with:

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