Bug appears in vue animatecss. It should be that the previous element has not disappeared, and the animation of the next element has already begun to render, so how to make one animation end and another start again?

 <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
       <start v-if="index === 0"/>
      </transition>
         <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
       <detail v-if="index === 1"/>
      </transition>
       <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
       <preview v-if="index === 2"/>
      </transition>
       <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
       <end v-if="index === 3"/>
      </transition>

Mar.07,2021

set mode
ide/transitions.html-sharp%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.


you can transition add a mode=" out-in "
and then add an attribute position:absolute
at the beginning of the animation so that it doesn't flash up after a while

.
Menu