Understanding Vue transitions and animation

The transition element is a wrapper that helps us add transition functionality to the element. It provides different hooks and adds classes to changing elements so that we can style them at different stages of transformation.

1. enter-from-class
2. enter-active-class
3. enter-to-class
4. leave-from-class
5. leave-active-class
6. leave-to-class
   This will be added to the customization code library later.

 <transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

In addition, the transition element also emits JS hook functions, so we can capture them and use js to perform animation. Available hooks are:

• before-enter / before-leave
• enter / leave
• after-enter / after-leave
• enter-cancelled / leave-cancelled

 transition   @before-enter='beforeEnter'>
    <!-- ... -->
</transition>

Then we can process them in JS.

beforeEnter(el, done) {
   done()
}

Vue Transition advanced usage

The above is just some basics. In the project, we will encounter more complex scenes. What should we do?

Let components transition under load

This is easy to implement. Just add the appear ance attribute to the transition element, as shown below:

<transition name="fade" appear>
...
</transition>

Transition between multiple elements

Suppose there are two such alternating div s.

<transition name="fade" appear>
  <div v-if="visible">
    Option A
  </div>
  <div v-else>
    Option B
  </div>
</transition>

All we have to do is wrap them in transition so that the transition style will apply to both.
To make the code work the way we want it to, we need to pay attention to the following points:

1. Absolute positioning element

When Vue transitions between two elements, it sometimes displays two elements at the same time and makes a transition in / out. If you want a smooth effect, you may need to position them absolutely on top of each other.
Otherwise, when you add or remove elements from the DOM, they may just jump around.

2. If the elements are the same, you must add a key attribute to the component

If the elements are the same, Vue will try to optimize the content and replace only the content of the element. According to the document, if you want to transition between multiple elements, you'd better always add a key.

Change transition time

Vue can detect when the transition / animation ends, but if we want to set the exact duration, we can set it through the duration property.

We can pass a value for both the enter and leave transitions, or we can pass an object with two values.

<transition :duration="500">...</transition> 
...
<transition :duration="{ enter: 1000, leave: 200 }">...</transition>

Conversion between dynamic components

All we need to do is wrap the dynamic component in the transition element.

<transition name="fade" appear>
     <component :is='componentType' />
 </transition>

Using third-party libraries

Suppose we don't want to write all the CSS animations ourselves. There are many great CSS animation libraries that can be easily incorporated into VueJS animation.

In the first example, we only use the default class name generated by the element, but all we can do is overwrite these values in any class we want. In this case, it will be the class name in the CSS library.
For our example, we use [animate. CSS]( https://daneden.github.io/animate.css/ )For this animation library, we just need to add the CDN link to our index HTML file.

// index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

Now, in our element, we can use the enter active class and leave active class attributes to connect the transition to animate js.

<transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>