Transitions work by starting off in one particular state and then transitioning into another state and interpolating the values in-between. A transition can't have multiple steps involved in an animation. Imagine a pair of curtains going from open to closed: the first state would be the open position, while the second state would be the closed position.
Vue has its own tags for dealing with transitions, known as <transition> and <transition-group>. These tags are customizable and can be easily used with JavaScript and CSS. There do not necessarily need to be transition tags to make transitions work, as you simply bind the state variable to a visible property, but the tags typically offer more control and potentially better results.
Let's take the toggle example that we had before and create a version that uses transition:
<template>
<...
