Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Transitions and Animations Chapter 13

Dynamic transitions

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 over which transition to use at any given moment.

Getting ready

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.

How to do it...

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>

Just note that most of the attributes here are bound to variables. Here is how the JavaScript
unfolds.

First, we will create a simple Vue instance with all of our data:

new Vue({

el: '#app',

data: {

kisses: 0,

kindOfTransformation: 'fade',

transformationMode: 'in-out'

}

})