Producing an effect on several elements

The <transition> component can contain only one element. When the effect must be applied to several elements, it is necessary to create several <transition> components or group the elements in a <transition-group> component. In this example, let’s look at using the <transition-group> component:

Using the <transition-group> component

<transition-group name="fade">
  <p v-if="show">
    Paragraph 1
  </p>
  <p v-if="show">
    Paragraph 2
  </p>
</transition-group>   

The elements on which the effect occurs (here, the two paragraphs) are grouped in a <transition-group> element instead of the <transition> element that was used previously when there was a single paragraph on which the effect was produced.

Now, we will take a look at...