Transitions and Animations Chapter 13Getting ready
Following this recipe makes sense if you have already worked your way through the
transition with Vue. Also, since we are working with components, you should at least have
an idea of what they are. Skim through the next chapter for a primer on components. In
particular, we will create a functional component, the anatomy of which is detailed in
the Creating a functional component recipe.
How to do it...
We will build a signature transition for a news portal. Actually, we will use a premade
transition in the excellent magic library (https://github.com/miniMAC/magic), so you
should add it to your project as a dependency. You can find the CDN link at
https://cdnjs.com/libraries/magic (go to the page to find the link, don't copy
it as a link).
First, you will build the website page, then you will build the transition itself. Lastly, you
will just add the transition to different elements.
Building the basic web page
Our web page will consist of two buttons each that will display a card: one is a recipe and
the other is the last breaking news:
<div id="app">
<button @click="showRecipe = !showRecipe">
Recipe
</button>
<button @click="showNews= !showNews">
Breaking News
</button>
<article v-if="showRecipe" class="card">
<h3>
Apple Pie Recipe
</h3>
<p>
Ingredients: apple pie. Procedure: serve hot.
</p>
</article>
<article v-if="showNews" class="card">
<h3>
Breaking news
</h3>