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

Now, since we bound the name of the transition to a variable, we can easily switch that

programmatically. We can do that by adding the following highlighted lines to the
computed property:

transformation () {

if (this.kisses < 3) {

return 'frog'

}

if (this.kisses >= 3 && this.kisses <= 5) {

this.transformationMode = 'out-in'

return 'princess'

}

if (this.kisses > 5) {

this.kindOfTransformation = 'zoom'

return 'santa'

}

}

The first added line is to avoid having an overlap while the zoom transition starts (more on

that in the Letting an element leave before the enter phase in a transition recipe).

The second added line switches the animation to "zoom".

To make everything appear the right way, we need one more CSS rule:

p {

margin: 0;

position: absolute;

font-size: 3em;

}

This is much nicer.

Now run the app and see how the two different transitions are used dynamically: