Advanced VueJS: Build Better Applications Efficiently/

...

/

Transitions

Transitions

Find out how transitions can be added to your Vue app and practice.

We'll cover the following...

Transitions make every app more attractive to the users. They add exciting details, make rendering smoother, and make changes to the UI more comprehensible. With modern CSS, we can add transitions to any element we like. Vue dedicates an entire component to transitions.

The <transition> component

The <transition> component is built-in and allows us to add transitions to every component. It adds CSS classes to the content defined in the default slot by default. Let’s look at a simple example of using the <transition> component that has all default values.

Press + to interact
<template>
  <div>
    <transition>
      <div> <!-- This element will be animated -->
      </div>
    </transition>
  </div>
</template>

The <transition> component offers several props with which we can steer its behavior:

  • name: This is the name of the transition. It customizes the used CSS classes.
  • type: This can be either animation or transition. It determines how Vue attaches event listeners and selects when to attach and detach CSS classes.
  • duration: These are custom hardcoded durations for enter, leave, or both.
  • css: This is a boolean flag to determine if Vue should calculate the duration from CSS. If set to false, we need to add the enter and leave event listeners.
  • mode: This is used if we animate several components at once. If we set the mode to - out-in, the enter animation of the second component will only start if the - leave transition of the previous component is done. The value
...