Custom transition classes

Custom transition classes are great when we want to add functionality from a third-party CSS animation library. In this example, we'll be using the Animate.CSS animation library, available here: https://daneden.github.io/animate.css/.

The official documentation covers the use of custom transition classes sufficiently at this URL: https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes.

The only thing to add is the example we have been building on, available here: https://codepen.io/AjdinImsirovic/pen/rqazXZ.

The code for the example is as follows. First, we'll start with the HTML:

<div id="app">
  <button v-on:click="show = !show">
    Show? {{ show }}
  </button>
  <transition :duration="4000"
     name="converted"
     enter-active-class="rubberBand animated"
     leave-active-class="bounceOut animated">
        <div v-if="show">
          <custom-component>
          </custom-component>
        </div>...