Transitioning groups of elements

To access the code file for this example, refer to https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter08/Example8.04

So far, we have gone through the fundamentals of Vue transition elements for simple components and elements, with both custom CSS-only and JavaScript-only support for animations. Next, we will explore how to apply a transition to a group of components – for instance, a list of items that will be rendered simultaneously by using v-for.

Vue.js provides another component for this specific purpose, the transition-group component.

We will now assume that we have a list of messages displayed on a feed, and we would like to add a transition to this list to provide some kind of effect when each item appears on the screen. Take the following component code, for instance (./Example8.04/src/components/Example8-04.vue):

<template>
  <div>
   ...