Transitioning on the initial render

With the appear keyword, we are able to package transition for elements when they are first loaded. This helps the user experience in that it gives the impression that the page is more responsive and faster to load when you apply it to many elements.

Getting ready

This recipe doesn't assume any particular knowledge, but if you have completed at least the Adding some fun to your app with CSS transitions recipe, it will be a piece of cake.

How to do it...

We will build a page about the American actor Fill Murray; no, not Bill Murray. You can find more information about him at http://www.fillmurray.com. We will use images from this site to fill our page about him.

In our HTML, let's write a header as the title of our page:

<h1> 
  The Fill Murray Page 
</h1>

After the title, we will place our Vue application:

<div id="app"> 
  <img src="https://fillmurray.com/50/70"> 
  <p> 
    The internet was missing the ability to 
    provide custom...