In this post, I would like to summarize the animation approaches for the <transition> and <transition-group> components in VueJS. I had to pick up and deep-dive into this knowledge because I had to implement an accordion footer in VueJS.

So, VueJS 3 provides two different ways to make elements animated. One option is CSS, and the other one is JavasScript. For complex animations, we have the option to mix them so we will not be limited ever. The only bottleneck we can face is our knowledge of CSS animations. Yet I am not an expert on animation techniques in CSS either. So I skip that part to focus on the VueJS segment of the animations.

Transition and Transition-group

When you create animation in VueJS, you need to use the <transition> or the <transition-group> component. These components are in-built features of the Framework. You won’t have to import anything. You can use it out of the box. The <transition> component is for simple elements, the <transition-group> is for elements that uses loops. See the code snippets below.

Example for Transition component usage

Example for transition-group component usage

CSS animations with Transition and Transition-group components

The logic of how the CSS animations work with these components is the same. By default, Vue will suppose he needs to look for a specific CSS rule. You can overwrite this feature when you want to use JavaScript, but we get there later in the next post. The default names of these CSS rules are the following:

If you do not define a name attribute on the transition component, then the asterisk will be replaced by ‘v’. Due to this, we will be able to use these class names optionally but we can define a custom name like so:

 <transition name='the-css-suffix-we-want-to-prepend'>

For example: “fade-ender-from fade-enter-to, etc”. You can see in the example section above that we used the zoom in the first and later the fade names. These names represent a frame of the animation phase. The From suffix is the start. The To is the end, and the active suffix stands for the active phase of the animation. These animation phases are available both in the enter and leave states. There is a nice diagram about this topic in the official VueJS documentation. See below here or check the spec about this here.

Transition or @keyframe animation

So, we have seen examples for the two different components. We have used them for different scenarios with built-in class names. We have also customized them with prefixes in the class names.
These features were for the transition animations. However, we can also use the CSS @keyframes to make animations with or without the transition features. Let’s see an example for a mixed scenario where we use the ‘transition’ and @keyframe animations together.

Fine-Tuning the animations:

When we make animations, there will be situations when we will have to fine-tune some behaviors. In those cases, we can use the following attributes on the components to change the specific behavior of the animations. (transition, transition-group)

• Duration
  • By default, VueJS start checking the defined duration on the CSS level. But we can explicitly set the duration time on the element level. In this case, we overwrite the default behavior.

• Mode:
  • The mode is another default behavior. It determines the order of the animations. By default, the value is ‘in-out’. It means any elements that are entering the document will be animated first. It will then proceed to animate elements that are leaving the document. By setting it to ‘out-in’ the reverse will happen. => Elements that are leaving the document will be animated first, followed by elements that are entering the document.
• Type:
  • When you use transition and CSS animation together with different transition times, Vue will use the longest transition time. To override this default behavior you can define the type attribute explicitly. It can be animation or transition.
• Appear
  • Last but not least when you want the animation to start on the first page render phase, use the appear attribute. It does not need to have any value.

Conclusion & Closing

In this post, I tried to go through the CSS animation options in VueJS. In the next one, I want to detail the animation options with JavaScript and the mixture of CSS and JavaScript animations together. Stay tuned and be also ready for my shared mindmap about the VueJS animations in the next post. It is going to contain both the CSS and the JS animation features. If you are interested in other VueJS-related posts you can find them here.