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.
