SoFunction
Updated on 2025-04-12

Solutions for multi-element transition effects in Vue

Common examples

The most common multi-label transition is a list and elements that describe the empty message of this list:

<transition>
 <table v-if=" > 0">
  <!-- ... -->
 </table>
 <p v-else>Sorry, no items found.</p>
</transition>

Here is an example

&lt;style&gt;
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
&lt;/style&gt;
&lt;div &gt;
 &lt;button @click="clear"&gt;Clear data&lt;/button&gt; 
 &lt;button @click="reset"&gt;Reset&lt;/button&gt;  
 &lt;transition name="fade"&gt;
  &lt;ul v-if=" &gt; 0"&gt;
   &lt;li v-for="item in items"&gt;{{item}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p v-else&gt;Sorry, no items found.&lt;/p&gt;
 &lt;/transition&gt;
&lt;/div&gt;
&lt;script&gt;
new Vue({
 el: '#demo',
 data: {
  items: ['html','css','js']
 },
 methods:{
  clear(){
   (0);
  },
  reset(){
   ();
  }
 }
})
&lt;/script&gt;

Same tag name

If the element of the same label name is switched, Vue will only replace the content inside the same label for efficiency

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div >
 <button @click="show = !show">toggle</button>  
 <transition name="fade">
  <p v-if="show">Jb51</p>
  <p v-else>JB51</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show:true
 },
})
</script>

From the following example, when two identical p elements are switched, there is no transition effect.

Therefore, for the switching of elements with the same label name, it is necessary to set a unique value through the key attribute to allow Vue to distinguish them.

<div >
 <button @click="show = !show">toggle</button>  
 <transition name="fade">
  <p v-if="show" key="trueMatch">Jb51</p>
  <p v-else key="falseMatch">JB51</p>
 </transition>
</div>

Alternative if

In some scenarios, v-if and v-else can be replaced by setting different states to the key characteristics of the same element.

<transition>
 <button v-if="isEditing" key="save">Save</button>
 <button v-else key="edit">Edit</button>
</transition>

The above example can be rewritten as

<transition>
 <button v-bind:key="isEditing">
  {{ isEditing ? 'Save' : 'Edit' }}
 </button>
</transition>

Here is an example

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div >
 <button @click="isEditing = !isEditing">toggle</button>  
 <transition name="fade">
  <p v-bind:key="isEditing">
   {{ isEditing ? 'Save' : 'Edit' }}
  </p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  isEditing:true
 },
})
</script>

Transitions using multiple elements of multiple v-ifs can be rewritten as a single element transition with dynamic attributes bound

<transition>
 <button v-if="docState === 'saved'" key="saved">Edit</button>
 <button v-if="docState === 'edited'" key="edited">Save</button>
 <button v-if="docState === 'editing'" key="editing">Cancel</button>
</transition>

Can be rewritten as

<transition>
 <button v-bind:key="docState">{{ buttonMessage }}</button>
</transition>
computed: {
 buttonMessage: function () {
  switch () {
   case 'saved': return 'Edit'
   case 'edited': return 'Save'
   case 'editing': return 'Cancel'
  }
 }
}

Here is an example

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div >
 <button @click="change">change</button>  
 <transition name="fade">
  <p v-bind:key="docState">{{ message }}</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  index:0,
  isEditing:true,
  arr:['saved','edited','editing']
 },
 computed: {
  docState(){
   return [];
  },
  message() {
   switch () {
    case 'saved': return 'Edit'
    case 'edited': return 'Save'
    case 'editing': return 'Cancel'
   }
  }
 },
 methods:{
  change(){
    = (++)%3;
  }
 } 
})
</script>

Transition mode

Let's take a look at the following example

<style>
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition:opacity .5s;}
</style>
<div >  
 <transition name="fade">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  isOn: true
 },
})
</script>

During the transition between the “on” button and the “off” button, both buttons are redrawn, one leaving the transition and the other begins to enter the transition. This is the default behavior of <transition> - both entry and departure occur simultaneously

The transitions that take effect simultaneously in and out cannot meet all requirements, so Vue provides a transition mode

in-out: The new element first transitions, and after completion, the current element transitions away.

out-in: The current element first transitions, and after completion, the new element transitions into.

in-out

Use in-out to rewrite the previous switch button transition

<div >  
 <transition name="fade" mode="in-out">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>

out-in

The following is to use out-in to rewrite the previous switch button transition

<div >  
 <transition name="fade" mode="out-in">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>

Sliding transition

When elements are set to absolute positioning and overlay each other, the transparency transition effect is achieved

<style>
#demo{position:relative;}
#demo button{position:absolute;left:40px;}
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition: 1s;}
</style>
<div >  
 <transition name="fade" >
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  isOn: true
 },
})
</script>

Below is a similar sliding using absolute and translate

<style>
#demo{position:relative;}
#demo button{position:absolute;left:40px;}
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter{transform:translateX(30px);}
.fade-leave-to{transform:translateX(-30px);} 
.fade-enter-active,.fade-leave-active{transition: 1s;}
</style>

If you set the in-out mode, it will achieve a cooler sliding effect

<style>
#demo{position:relative;}
#demo button{position:absolute;left:40px;}
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter{transform:translateX(30px);}
.fade-leave-to{transform:translateX(-30px);} 
.fade-enter-active,.fade-leave-active{transition: 1s;}
</style>
<div >  
 <transition name="fade" mode="in-out">
  <button :key="isOn" @click="isOn = !isOn">{{ isOn ? 'On' : 'Off' }}</button>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  isOn: true
 },
})
</script>

Multi-component transition

The transition of multiple components is much simpler and does not require the use of key features. Instead, just use dynamic components

Here is an example

&lt;style&gt;
.fade-enter,.fade-leave-to{opacity:0;}
.fade-enter-active,.fade-leave-active{transition: .5s;}
&lt;/style&gt;
&lt;div &gt;
 &lt;button @click="change"&gt;Switch page&lt;/button&gt;
 &lt;transition name="fade" mode="out-in"&gt;
  &lt;component :is="currentView"&gt;&lt;/component&gt;
 &lt;/transition&gt;
&lt;/div&gt;
&lt;script&gt;
new Vue({
 el: '#example',
 data:{
  index:0,
  arr:[
   {template:`&lt;div&gt;ComponentA&lt;/div&gt;`},
   {template:`&lt;div&gt;ComponentB&lt;/div&gt;`},
   {template:`&lt;div&gt;ComponentC&lt;/div&gt;`}
  ],
 },
 computed:{
  currentView(){
    return [];
  }
 },
 methods:{
  change(){
    = (++)%3;
  }
 }
})

For more articles about Vue transition animation, you can check the following related links