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

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea0d6c-478ca.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea0d6c-478ca.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?