Vue.js 2 Cookbook

How it works...

As you may have noted, there is no CSS in your code. The animation is purely driven by JavaScript. Let's dissect our Vue transition a little:

<transition   @enter="enter"   :css="false" >   <p v-if="taxiCalled"></p> </transition>

Although this is still a transition that could use CSS, we want to tell Vue to shut down the CSS and save precious CPU cycles by setting :css="false". This will make Vue skip all the code related to CSS animation and will prevent CSS from interfering with our pure JavaScript animation.

The juicy part is in the @enter="enter" bit. We are binding the hook that triggers when the element is inserted in to ...