Vue.js 2 Cookbook

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.