Transitions and Animations Chapter 13Maybe it's worth mentioning why we had to add the width and height to our image. The
reason is that when we specify an image URL in our HTML, the browser doesn't know the
size of the image in advance, so it doesn't reserve any space for it by default. Only by
specifying the size of the image in advance, the browser is able to correctly compose the
page even before an image is loaded.
Transitioning between elements
Everything on a web page is an element. You can easily make them appear and disappear,
thanks to Vue v-if and v-show directives. With transitions, you can easily control how
they appear and even add magic effects. This recipe explains how to do it.
Getting ready
For this recipe, you should have some familiarity with Vue transitions and how CSS works.
How to do it...
Since we talked about magic, we will turn a frog into a princess. The transformation itself
will be a transition.
We will instantiate a button that, when pressed, will represent a kiss to the frog:
<div id="app">
<button @click="kisses++"> Kiss!</button>
</div>Every time the button is pressed, the variable kisses increases. The variable will be
initialized to zero, as the following code shows:
new Vue({
el: '#app',
data: {
kisses: 0
}
})