Using Transitions and Animations Together

Vue.js requires attaching event listeners to make it known when a transition has ended. It may be transitionend or animationend, depending on the CSS you have applied. If you are using only first or only the second type, Vue.js can automatically detect the correct type. But, in the cases when you have to use both transitions and animations together, you may explicitly declare the type.

In some cases, you may want to have both on the same element, for example, having a CSS animation triggered by Vue.js, along with a CSS transition effect on hover. In these cases, you will have to explicitly declare the type you want Vue.js to care about in a type attribute, with a value of either animation or transition.

Explicit Transition Durations

This is a new feature introduced in the Vue.js version 2.2.0+. This is used to apply transition and animation both on the element using Vue.js. By default, Vue.js has to wait for the transionend and animationend event of detecting if the animation or transition is done. In such cases, when the transition causes delay, we can apply the duration explicitly as follows:

The duration property is used with the : symbol on the transition element, as you can see in the above code.

If you want to specify the duration separately for entering and leaving cases, you can specify it as follows:

JavaScript Hooks

The transition classes can be called as methods using JavaScript. You can define JavaScript hooks in attributes. Let's see an example to understand the concept well:

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 "Toggle" button, you can see the transition and animation. See the following output:

Example Explanation

In the above example, an animation is performed using js methods on the transition element. The methods on transition are applied as follows:

A prefix v-on is added before the name of the event. We have also added a property on transition v-bind:css = "false", so that Vue.js understands it as a JavaScript transition.

The methods are defined in the Vue.js instance as follows:

We have applied the required transition in each of the above methods. An opacity animation is applied on the click of the button and when the animation is done. A third party library is also used for animation.

Transition on Initial Render

If you want to add animation at the start, you have to add 'appear' property to the transition element. See the following example to understand it better:

Index.html file:

Index.js file:

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

Output: