animation和transition一起使用的问题

Question

想使用animation时长的时候，type是设置为“animation”吗？同时存在的时候，如果时间是不一样的，比如animation是2S，transition是5S，那么两个是同时触发的吗？2S后动画结束，但过渡效果继续持续3秒然后结束吗？

Answer 1

ellydebug 2018-06-05 17:45:31

1. type是设置为 animation

2. 是同时触发

3. 样式是同时结束，略有区别。type为animation时，animate在2s完全执行完毕；而transition原本需要5s执行完，所以在第2s结束时只执行了2/5的透明度变化，由于突然结束，透明度直接变为1 or 0

• 提问者 即墨火未燃 #1

  感谢，也就是说都是同时触发和同时结束么？

• ellydebug 回复 提问者 即墨火未燃 #2

  是的。

• qq_给自己一个微笑_0 #3

  我咋看不是同时结束呢

点开查看后面1条评论

Answer 2

Dell 2018-05-11 17:11:25

这个你可以做个实验，vue里的具体机制讲完课有点记不住了，见谅，测试下，看看class移除的时刻即可。