关于同时使用

来源：5-3 在Vue中同时使用过渡和动画

chriose

2018-05-24

当给到type transition时。开始动画的appear就失效了，这是为什么

写回答

3回答

于曼丽

2018-07-18

因为你的代码里面 appear-active-class="animated swing" 这里只是为开始动画应用了 keyframe 形式的动画，没有使用 transition。换句话说，也可以理解为你的开始动画指定了一个 transition: all 0s 的样式。那么你的开始动画的执行时间点是这样的：keyframe 动画和 transition 效果同时开始，但是 transition 持续时间为 0s 然后触发 transition-end 事件，keyframe 动画持续时间为 1s (animate.css 源码里面指定的为 1s) 然后触发 animation-end 事件。你设置 type="transition"，所以 vue 框架监听到 transition-end 事件之后，便会清除掉 .fade-enter-active .fade-enter-to .appear-enter-active 这些类，所以动画就停止了。由于transition 只持续了 0s，其实就相当于你设置了 :duration="0"，动画持续 0s 就结束，因此还没来得及执行 keyframe 动画，你的动画就已经停止了。如果你设置 type="animation"，那么 vue 框架会侦听 animation-end 事件来决定何时结束动画，由于 keyframe 动画持续时间为 1s，就相当于设置了 :duration="1000"，这样就会执行你的 keyframe 动画了。

你可以试一下，你的源码不要动，只是修改 appear-active-class="animated swing .fade-enter-active"，这样就相当于为你的开始动画效果添加了一个持续时间为 3s 的transition，transition-end 事件的触发就不会是原来的 0s 了，而是 3s 之后触发，type="transition" 就相当于 :duration="3000"，就可以执行你的 keyframe 动画了