The last time I went through the CSS animation approaches in Vue 3. In this post, I would like to share the notes I took during my studies on Vue 3 JavaScript animation. As I promised in my previous post, I will share the mindmap notes about the Vue3 CSS and JavaScript animations together in one map. But before sharing, let’s see the summary of the JavaScript animations in Vue3.

How to apply JavaScript animation instead of CSS

As I wrote in the previous post, VueJS looks for the class definitions of the CSS animations by default. Probably the reason for this is the performance. JavaScript animations are more resourceful than CSS animations, but it provides much more control over an animation than the CSS itself. Although CSS is the default technique, which means the default value of the ‘:css’ attribute is true, we have the option to change it. If you add ‘:css=false’ attribute to a <transition> or a <transition-group> component, then VueJS stops searching for CSS rules, and you are ready to go with JavaScript. 

JavaScript animation hooks in VueJS

VueJS provides hooks for JavaScript animations that we can use listening to events on the <transition> and <transition-group> components. We can group these hooks similarly to the CSS animations into two phases: Enter and Leave. The enter hooks run when an element is inserted into the DOM. The leave hooks run when an element is removed from the DOM.

The before phase runs before the animation start, so we can initialize or set default values here. The enter and leave phase runs when the animation is in progress. The after phase runs when the animation is complete. See a screenshot below about the hooks in a more visual format.

As you can see, there are two more events in both categories, the canceled hook. We can listen to animation canceling with these hooks. We do not use them often, but it is worth knowing it. When we use hooks we trigger functions with these listeners so we need to assign them with a function name just like in the code snippets below.

  <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      :css="false"
      appear
  >
    <h2 v-if="flag">JS</h2>
  </transition>

Let”s see the definition of these functions in a real code example:

Arguments of the Vue JS hook functions

By default, the element object is passed to these functions. Each object contains information about the element that is currently being animated and we can modify this object if we need to. The enter and the leave functions have to have a second parameter which must be a function.
These second arguments are required. When the animations are finished playing, we signal this to these hooks through these callback functions. So the done parameters are callback functions. We need to use and call these functions otherwise, the VueJS animation will not work.

An animation runs only on an element. We access the element object in the native Javascript environment with getElementById and the querySelector functions, but we do not need to do it here. The first argument of the hook function is the same object element, so we have access to all elements, methods, and properties. The animate method is available on the DOM element object, and that is what we used in the example above. Anyway, the animation function is part of the Web API which is not VueJS.

How to mix the CSS and JavaScript animations in VueJS?

As I mentioned in the previous post “for complex animations, we have the option to mix” the CSS and the JavaScript animations together. To do so we have to modify a few things in the code above,

• we need to convert the ‘:css’ HTML attribute to true. In this case, VueJS will use the duration time that is specified in the CSS and the done function at the hooks method becomes optional. Without it, Vue will still know when the animation is complete.
• so we need to remove the parameter done with the transition animation.
• we need to put back the ‘fade’ CSS prefix name as attribute. So we can use the defined CSS animations which are defined in the code.

Anyway, If you try to run this code, you will still see the console log messages in the browser as in the previous code snippets above, which means the JavaScript and the CSS animations work together. This is it! Now you are allowed to check my mindmap in large or in small below …

Conclusion and Closing:

This post tried to collect the essential parts of the JavaScript animation in VueJS as a second post of the animation series. We are still far away from the expert level, but this could provide the basics to start having fun. I hope you find some value here. Keep it up, and see you soon!