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"...