这次给大家带来vue.js之css实现过度动画，vue.js的css实现过度动画注意事项有哪些，下面就是实战案例，一起来看一下。
transition 动画
I am show
css-transform动画
I am show
css-transform动画
动态组件
立即学习“前端免费学习笔记（深入）”；
//动态组件
动态组件,mode为默认
同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式
in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
默认情况下是in-out
上述动画,如果设置mode="out-in"
mode="out-in"
注意:如果两个标签名相同,是不会执行动画的,若想执行动画,需要给标签设置不同的key来加以区分
i am show
not in show
两个标签名相同的动画,未设置不同的key
如果设置了不同的key,就可以执行动画了
//设置不同的key i am show
not in show
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
