Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Transitions and Animations Chapter 13

Building the reusable transition

We decided that our website will feature a transition whenever a card is displayed. Since

we intend to reuse the animation with everything in our website, we'd better package it in a
component.

Before the Vue instance, we declare the following component:

Vue.component('puff', {

functional: true,

render: function (createElement, context) {

var data = {

props: {

'enter-active-class': 'magictime puffIn',

'leave-active-class': 'magictime puffOut'

}

}

return createElement('transition', data, context.children)

}

})

The puffIn and puffOut animations are defined in magic.css.

Using our transition with the elements in our page

Now, we will just edit our web page to add the component to our cards:

<div id="app">

<button @click="showRecipe = !showRecipe">

Recipe

</button>

<button @click="showNews = !showNews">

Breaking News

</button>

<puff>

<article v-if="showRecipe" class="card">

<h3>

Apple Pie Recipe

</h3>

<p>

Ingredients: apple pie. Procedure: serve hot.

</p>

</article>

</puff>

<puff>

<article v-if="showNews" class="card">