Vuetify — Transitions

Image for post
Image for post
Photo by Patrick Hendry on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Transitions

Vuetify provides us with transition effective we van add.

We can add transition with the transition prop.

For example, we can write:

The slide-x-transition provides us with a horizontal transition applied when displaying the menu.

We can reverse the direction of the transition with slide-x-reverse-transition .

Slide Y Transitions

We have the slide-y-transition to slide elements vertically.

For example, we can write:

Now we have vertical transition instead of horizontal.

Also, we have the slide-y-reverse-transition to apply the transition effect in the reverse direction.

Scroll Y Transitions

We can add scroll y transition with:

We just set “scroll-y-transition” as the value of transition .

Fab Transition

We can add a rotating transition with fab-transition :

Expand Transition

The v-expand-transition component lets us add an expand transition effect.

v-expand-x-transition is the horizontal version.

For example, we can write:

Now when we toggle the card, we see a transition effect applied to it.

Conclusion

We can add various transition effects with Vuetify.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store