Introduction
Rendering a list is very often used in programming, most often it is a dynamic display of a list when rendering a series of similarly grouped information.
This article explains how to animate such lists with the Vue.js framework. To animate multiple elements, we cannot use the “transition” component, because it can “wrap” ONLY ONE HTML element, therefore Vue.js introduces a new type of wrapper component, called <transition-group>.
This component, with certain rules, supports the animation of multiple HTML elements within one transition block. It is necessary to define an attribute through which it is defined how the wrapper element will be rendered and uniquely mark each member of the list.
|
1 2 3 4 5 6 7 8 |
<transition-group name="list"> <p>Element liste br.1</p> <p>Element liste br.2</p> <p>Element liste br.3</p> <p>Element liste br.4</p> <p>Element liste br.5</p> ... </transition-group> |
The <transition-group> component can animate the appearance and disappearance of an element with the aforementioned CSS classes that Vue.js automatically generates just like the <transition> component.
- …-enter
- …-enter-active
- …-enter-to
- …-leave
- …-leave-active
- …-leave-to
Characteristics of “transition-group”
The “key” attribute
One of the musts when using the <transition-group> component is to uniquely label each list element, so that Vue.js can distinguish between them. Therefore, it is unnecessary to define the “key” attribute for each element of the list and assign it a unique value.
|
1 2 3 4 5 6 7 |
<transition-group name="list"> <p key="item1" >Element liste br.1</p> <p key="item2" >Element liste br.2</p> <p key="item3" >Element liste br.3</p> <p key="item4" >Element liste br.4</p> <p key="item5" >Element liste br.5</p> </transition-group> |
Example
In this example, element disappearance is animated, using classes generated by Vue.js: .remove-list-enter-active, .remove-list-leave-active, .remove-list-enter and .remove-list-leave-to
See the Pen List animation with “transition-group” – basic by Web programming (@chos) on CodePen.
Here only the disappearance of one element is animated, but the occupation of the empty space is NOT animated. There is a possibility to animate the movement of the rest of the list, but this is explained in the section “Animation of element position change”
The “tag” attribute
Unlike the component <transition> which does not render in the DOM, the component <transition-group> is rendered. The default behavior of the wrapper (“transiton-group” tag) is to render as a <span> element.
Fortunately this default behavior can be changed. To avoid rendering a “span” element, we need to define the type of element we want it to be. This is accomplished by defining a value for the “tag” attribute.
Example
In this example, the “tag” attribute defines that it willcomponent <transition-group> in the DOM to be rendered as “ul” tag:
|
1 2 3 |
<transition-group name="list" tag="ul" ;> // lista elemenata </transition-group> |
Animation of element position change
In addition to “regular” animation with standard Vue.js classes (…-enter, …-leave…), the <transition-group> component can animate the change in element position (inserting and removing an element from the list…). This functionality is obtained by defining properties for animation through a new CSS class, named …-move. This CSS class is generated in the background by Vue.js just for this purpose, to define the animation of list elements that change their position for some reason. As with other classes generated by Vue.js, the prefix will match the value of the “name” attribute.
|
1 2 3 |
.nameTransitionElemnta-move{ ... // npr. transition: all 1s; } |
NOTE:
The animation defined in this way will not work if the elements have the value of the CSS property
display: inline set
This is quite sufficient for animating the movement of an element that changes its place in the list or is inserted into the list, but not for the animation of the movement when an element is removed from the list. The reason is that an element that disappears due to its ongoing animation does not make room for other elements of the list. Therefore, until that element completely disappears, the animation cannot be executed.
The solution for this is to define the value of the position property as “absolute” when the class is …-leave-active active.
|
1 2 3 4 |
....-leave-active { transition: all 1s; position:absolute; } |
Example
In this example, the elements change position and that movement is animated using a CSS class generated by Vue.js named .flip-list-move:
See the Pen List animation with “transition-group” by Web programming (@chos) on CodePen.
Example
In this example, the class generated by Vue.js .remove-list-move is used, where the animation of moving the elements is defined through it (in parallel with the animation of the element disappearing). This movement is made possible by defining the position property “absolute” immediately after the disappearing animation is started through the .remove-list-leave-active class, because this frees up the space where the disappearing element is before it disappears completely.
See the Pen List animation with “transition-group” – remove item by Web Programming (@chos) on CodePen.