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

<h3>

Breaking news

</h3>

<p>

Donald Duck is the new president of the USA.

</p>

</article>

</puff>

</div>

The cards will now appear and disappear when pressing the button with a "puff" effect.

How it works...

The only tricky part in our code is building the component. Once we have that in

place, whatever we put inside will appear and disappear according to our transition. In our
example, we used an already made transition. In the real world, we may craft a seriously

complex animation that can be difficult to apply every time in the same manner. Having it
packaged in a component is much easier and maintainable.

Two things make the component work as a reusable transition:

props: {

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

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

}

Here, we specify the classes the component must adopt when entering and leaving; there is

nothing too special here, we have already done it in the Integrating with third-party CSS

animation libraries such as animate.css recipe.
At the end we return the actual element:

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

This line creates the root of our element that is a tag with only one child--

context.children. This means that the child is unspecified; the component will put as

child whatever actual child is passed in the template. In our examples, we passed some

cards that were promptly displayed.