Understanding Vue transitions

Vue relies on CSS transitions and uses the <transition> Vue component to wrap around an HTML element or a Vue component to add the CSS transitions, as follows:

<transition>
  <p>hello world</p>
</transition>

You can see how easy it is – you can just wrap any element with the <transition> component like a piece of cake. When that happens, Vue will apply the following CSS transition classes to that element by adding and removing them at appropriate timings:

• The .v-enter and .v-leave classes define how your element looks before the transition starts.
• The .v-enter-to and .v-leave-to classes are the "completed" states for your element.
• The .v-enter-active and .v-leave-active classes are the active states of the element.

These classes are where the CSS transitions take place. For example, a transition that you would do in an HTML page could look as follows:

.element {
  opacity: 1;
  transition: opacity 300ms;
...