[Vuejs]-How to smooth the transition animation in VueJS

0👍

The transitions built into Vuetify are very, very simple and not designed for the kind of choreographed animation it looks like you’re trying to build. They’re for things like showing or hiding an element, moving between tabs in a tab pane, etc. (i.e. animating a single element), and not designed to coordinate changes happening between multiple elements. Unfortunately, as it says in this blog post “there is no silver bullet for great animations.”

I suggest that you don’t try to rely on built-in Vuetify transitions here, but instead go for a plain CSS keyframe-based strategy (here’s an old but decent introduction to the approach). Alternatively, if you’d like to use a tool built specifically for animation, GSAP is about as close to an industry standard as there is, although it might be overkill for the scenario you’ve described.

Leave a comment