Transitions and Animations Chapter 13<p>
The internet was missing the ability to
provide custom-sized placeholder images of Bill Murray.
Now it can.
</p>
</div>Which when rendered in a browser would appear like the following:
Our page is very plain right now. We want the Fill Murray picture to fade in. We have to
wrap it inside a transition:
<transition appear>
<img src="https://fillmurray.com/50/70">
</transition>The following are the CSS classes:
img {
float: left;
padding: 5px
}
.v-enter {
opacity: 0
}
.v-enter-active {
transition: opacity 2s
}Running our page now will make the image appear slowly, but it will also move the text.
To fix it, we have to specify the image size in advance:
<transition appear>
<img src="https://fillmurray.com/50/70" width="50" height="70">
</transition>This way, our browser will set aside some space for the image that will appear slowly.