Vue.js Animation

In Vue.js applications, we can apply animations in the same way as we applied transition in earlier examples. Animation also has classes that you have to declare to get the animation effect.

The only difference between Vue.js transition and Vue.js animation is that in Vue.js animation, the v-enter is not removed immediately after the element is inserted, but on an animation end event.

Let's take an example to understand the concept of animation and see how the animation works in an application.

Example

Index.html file:

Index.js file:

Let's use a simple CSS file to make the output more attractive.

Index.css file:

After the execution of the program, you will see the following output:

Output:

When you click on the "Click Here" button, you can see the animation effect. The image will rotate from 0 to 360 degrees and at last disappear. See the following images:

Another screenshot:

Example Explanation

In the above example, you can see that we have used classes same as transition effect. Here, we have enclosed an image in p tag as following:

Here, the name of the transition is shiftx and the class is applied as the following CSS code:

In the above code, the class is defined within the transition name, i.e. shiftx-enter-active and .shiftx-leave-active.

The animation is defined with the keyframes from 0% to 100% where transform is defined at each of the keyframes in degree as following:

Custom Transition Classes

Vue.js facilitates you to specify your own custom transition classes by providing the following attributes. These attributes can be added to the transition element.

• enter-class
• enter-active-class
• enter-to-class (added in version 2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (added in version 2.1.8+)

Custom classes are generally used when we want to use an external CSS library such as animate.css.

Let's take an example to understand the concept of custom transition classes and see how they work in an application.

Example

Index.html file:

Index.js file:

After the execution of the program, you will see the following output:

Output:

When you click on the "Click Here" button, you can see two types of animations. The first animation is applied to the above example is:

Output:

And the second animation is:

Output:

Here, we have used a third party library animate.css to show the use of custom animation classes for the example.