Vue.js Transition and Animation

There are various transition and animation features available in Vue.js.

Transition

Vue.js provides various ways to apply transition to the HTML elements when they are added in the DOM. Vue.js has a built-in transition component that needs to be wrapped around the element, which needs transition.

Syntax

<transition name = "nameoftransition"> . <div> </div> </transition>

We will consider an example to understand the working of transition.

transition.html

There is button called Click Here created using which we can change the value of the variable show to true to false and vice versa. There is a p tag which shows the text element only if the variable is true. We have wrapped the p tag with the transition element as shown in the following piece of code.

<transition name="fade"> . <p v-show= "show" v-bind:style = "styleobj">Animation Example</p> </transition>

The name of the transition is fade. VueJS provides some standard classes for transition and the classes are prefixed with the name of the transition.

Following are some standard classes for transition:

• v-enter: This class is called initially before the element is updated/added. Its the starting state.

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

• v-leave: Added when the leaving transition is triggered, removed.

• v-leave-active: Applied during the leaving phase. It is removed when the transition is done. This class is used to apply the delay, duration, and easing curve during the leaving phase.

Each of the above classes will be prefixed with the name of the transition. We have given the name of the transition as fade, hence the name of the classes becomes .fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.

The .fade_enter_active and .fade_leave_active are defined together and it applies a transition at the start and at the leaving stage. The opacity property is changed to 0 in 2 seconds.

The duration is defined in the .fade_enter_active and .fade_leave_active. The final stage is defined in the .fade_enter, .fade_leave_to.

The display in the browser is as follows.

Output:

On the click of the button, the text will fade away in two seconds.

After two seconds, the text will disappear completely.

Animation

Animations are applied the same way as transition is done. Animation also has classes that needs to be declared for the effect to take place.

We will consider an example to see how animation works.

animation.html

To apply animation, there are classes same as transition. In the above code, we have an image enclosed in p tag as shown in the following code.

<transition name = "shiftx"> . <p v-show = "show"> . <img src="images/img.jpg" style="width:100px; . height:100px;"/> . </p> </transition>

The name of the transition is shiftx. The class applied is as follows:

<style> . .shiftx-enter-active {animation: shift-in2s;} . .shiftx-leave-active {animation: shift-in2s reverse;} . @keyframes shift-in{ . 0%{transform:rotateX(0deg);} . 25%{transform:rotateX(90deg);} . 50%{transform:rotateX(120deg);} . 75%{transform:rotateX(180deg);} . 100%{transform:rotateX(360deg);} . } </style>

The class is prefixed with the transition name, i.e. shiftx-enter-active and .shiftx-leave-active. The animation is defined with the keyframes from 0% to 100%. There is a transform defined at each of the keyframes.

We can see the output in any browser.

Output:

On clicking the button, it rotates from 0 to 360 degree and disappears in 2 sec time.

If you have any queries regarding this blog or need any help you can contact us on: contact@codersarts.com