Transition Groups

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 on 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 have some effect when each item appears on the screen. In the ./src/components/Messages.vue file, let's wrap the main container with a transition-group component, and pass the same props we used previously for our transition component. They share the same prop types:

<transition-group name="fade">
  <p v-for="message in messages" :key="message" v-show...