vue.js 2.x过渡动画如何暂停

Question

用vuejs中的transition做一个窗帘的动画效果，点击暂停的时候停止动画

Answer 1

需要用到js钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
    

另外，transitions无法停下动画，是必须走完，你可以强制赋值style，删除transitions效果，但是这种效果不好，而且控制起来很麻烦。
推荐使用animations做过渡效果，自带动画暂停

animation-play-state:paused;
-webkit-animation-play-state:paused;