Transitions and Animations Chapter 13The fade transformation we are referring to is the following CSS:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}The variables transformation and emoji are defined by two computed properties:
computed: {
transformation () {
if (this.kisses < 3) {
return 'frog'
}
if (this.kisses >= 3 && this.kisses <= 5) {
return 'princess'
}
if (this.kisses > 5) {
return 'santa'
}
},
emoji () {
switch (this.transformation) {
case 'frog': return ' '
case 'princess': return ' '
case 'santa': return ' '
}
}
}While we are using the fade transition between the frog and the princess, we want
something else between the princess and the frog. We will use the following transition
classes:
.zoom-leave-active, .zoom-enter-active {
transition: transform .5s;
}.zoom-leave-active, .zoom-enter {
transform: scale(0)
}