Transitions and Animations Chapter 13Using this setup, we are limited in using the same transition we used between the first two
elements.
There is a workaround for this explained in the Dynamic transitions recipe.
Setting the key attribute dynamically
We don't have to write the key for all our elements if we already have some data available.
Another way we could write the same app, but without repeating the element is as follows:
<transition name="fade">
<p :key="transformation">{{emoji}}{{transformation}}</p>
</transition>This, of course, means that we have to provide a sensible value for the transformation
and emoji variables, depending on the number of kisses.
To do this, we will tie them to 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 ' '
}
}
}We traded off some complexity in the template for some more logic in our Vue instance.
This can be good in the long run if we expect more complex logic in the future or if the
number of transformation rises.