Vue.js Transition and Animation

Vue.js provides several ways to apply transition and animation effects to the applications when you insert, update, or remove items from the DOM. These transition and animation effects are used to make the application attractive and interactive for the users.

It also provides some tools to do the following tasks:

• It provides classes and automatically applies those classes for CSS transitions and animations.
• It can integrate 3rd-party CSS animation libraries, for example, Animate.css.
• It can use JavaScript to manipulate the DOM during transition hooks directly.
• It can integrate 3rd-party JavaScript animation libraries, for example, Velocity.js.

Vue.js Transition

There are many ways to apply the transition to the HTML elements when you insert, update, or remove items from the DOM. Vue.js provides a built-in transition wrapper component that you have to use while entering/leaving transitions for any element or component. See the syntax of the transition effect.

Syntax:

Let's see a simple example to understand the concept and working of transition effect.

Vue.js fade transition

Example 1

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 of the button, the text will fade away within 3 seconds. See the following image:

Example Explanation

In the above example, we have created a button called "Click Here" which we can change the value of the variable show to true to false and vice versa. We have written v-show directive in p tag, which shows the text element only if the variable is true. The p tag is wrapped with the transition element as following:

This is an example of a fade transition. Following is a list of some standard classes used in transition:

v-enter: This transition class is called initially before the element is updated or added to the HTML element. This specifies the starting state.

v-enter-active: This transition class is used to define the delay, duration, and easing curve for entering the transition phase. This class specifies the active state for the entire phase, and this is always available during the entire entering phase.

v-leave: This transition class is added when the leaving transition is triggered or removed.

v-leave-active: This transition class is used during the leaving phase. When the transition is completed, this class is removed automatically. This class specifies the delay, duration, and easing curve during the leaving phase.

Each of the transition classes will be prefixed with the name of the transition. For example, for fade transition,the name of the classes would be .fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

In the above example, we have defined the .fade_enter_active and the .fade_leave_active class together, and it applies a transition at the start and the leaving stage.

Here, the opacity property is changed to 0 in 3 seconds.

Vue.js shiftx transition

Let's take another example, where we have used an image to shift on the x-axis when the button is clicked.

Here, we are using the shiftx transition. This transform property will shift the image on the x-axis by 100px. See the following example:

Example 2

Index.html file:

Index.js file:

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

Output:

When you click on the button, the image will be shifted 100px towards the right. See the following output: