In Vue, a constant theme is reactivity and, of course, transitions can be dynamic because of that. Not only the transition themselves, but all their properties can be bound to reactive variables. This gives us a lot of control on which transition to use at any given moment.
This recipe builds on top of the Transitioning between elements recipe. You don't need to go back if you already know about transitions, but if you feel like you're missing something, it might be a good idea to complete that first.
We will transform a frog into a princess with some kisses, but if we kiss too much the princess will turn into Santa. Of course, we are talking about emojis.
Our HTML setup is very simple:
<div id="app"> <button @click="kisses++">Kiss!</button> <transition :name="kindOfTransformation" :mode="transformationMode"> <p :key="transformation">{{emoji}}{{transformation}}</p> </transition> </div...