Solve the problem of invalid vue exit animation

Encountered a problem: Add exit animation to the modal box, and the animation effect is there, but the animation that exits is gone.

Write a simple structure:

<div class="<strong>mask</strong>" v-show="warning"><br> 　　 
<transition name="warning"><br>  　　  　　  
<div v-show= " warning "  class="warning-modal"><br>   　　  　　   　　  
<p> Please log in </p><br>  　　  　　  
</div><br> 　　 
</transition><br></div>

. mask is the mask layer, and. warning-modal is the contents of the display modal box.

If it is like the above structure, I will encounter the above problems. Because warning-modal is wrapped in the. mask mask layer. But. mask has no animation, 1 click Close,. mask has no animation, and it disappears directly. warning-modal disappears with. mask, and we can't see its exit animation. If you put transition outside.

<transition name="warning">
  <div class="mask" v-show="warning">
  　　  　　  <div v-show= " warning "  class="warning-modal">
   　　  　　   　　  <p> Please log in </p>
  　　  　　  </div>
  </div> 　　 
</transition>

Obviously, the mask layer will also be animated with the reminder box!

My solution is to add two transition

<transition name="mask">
  <div class="mask" v-show="warning">
   <transition name="warning">
  　　  　　    <div v-show= " warning "  class="warning-modal">
   　　  　　   　　   <p> Please log in </p>
  　　  　　    </div>
  　　  　　  </transition>
 　　 </div> 　　 
</transition>

// And then give maskde  Exit animation increases transition-delay Property. 

.mask-leave-active{
   transition:all 1s;
   transition-delay:1s;
}

Additional knowledge: vue binds class with 3-entry operators

Binding class through 3-entry operator is a common operation

It should be noted that the name of class should be sounded in data

<p :class="isIncrse?incrseP:downP"> Ring comparison <i></i>{{item.num}}</p>
data() {
  return {
    isIncrse: true,
    incrseP: 'incrseP',
    downP: 'downP'
  }
}

.downP {
  color: red;
}
.incrseP {
  color: pink;
}