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 (<transition>) 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.