While a single transition component is used to wrap around a single element, transition groups are used for animating multiple elements. They come with an additional animation hook: v-move
.
In the example that follows, we'll build simple functionality where users can award a piece of content online with an applause, a concept similar to the clap
feature of https://medium.com/, which works as follows: if a visitor to the website likes a piece of content, they can award it with claps, by clicking the clap
button up to 50 times. hence, the claps feature works like a kind of a counter of how much a piece of content is appreciated by the website visitors.
In our implementation, we will combine the features we have already covered. The difference is, instead of a transition, we will use the transition-group
component. This is the HTML code:
<!-- HTML --> <div id="app"> <div class="tale"> <transition-group> <button ...