In Vue there are transition and animation.

Transition are about elements that enter or go out. Animation are a more generic concept.

Transitions

In Vue transitions there are a special / magic tag that are triggered by:

• Conditional rendering (using v-if)
• Conditional display (using v-show)
• Dynamic components
• Component root nodes

Example of use:

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

Vue transition decide to apply css class in a dynamic way. The classes that vue decide to apply are six:

• v-enter
• v-enter-to
• v-leave
• v-leave-to

Animation

Animation use same magic tag () but there is a behavior very different:

• v-enter is removed at the end of animation (animationend event)

In transition v-enter is removed after first frame.