这次给大家带来vue.js之css实现过度动画，vue.js的css实现过度动画注意事项有哪些，下面就是实战案例，一起来看一下。
transition 动画
export default { data () { return { show: true } } } .adc-enter-active, .adc-leave-active { transition: all 2s ease-out; } .adc-enter, .adc-leave-to { opacity: 0; }I am show
登录后复制
css-transform动画
export default { data () { return { show: true } } } .my-trans-enter-active, .my-trans-leave-active { transition: all .5s ease-out; } .my-trans-enter { transform: translateY(-100px); opacity: 0; } .my-trans-leave-active { transform: translateY(100px); }I am show
登录后复制
css-transform动画
动态组件
立即学习“前端免费学习笔记（深入）”；
import comA from './components/a.vue' import comB from './components/b.vue' export default { components: {comA, comB}, data () { return { componentView: 'com-a' } }, methods: { onToggle () { if (this.componentView === 'com-a') { this.componentView = 'com-b' } else { this.componentView = 'com-a' } } } } .fade-enter-active, .fade-leave-active { transition: all 2s ease-out; } .fade-enter, .fade-leave-to { opacity: 0; }//动态组件
登录后复制
动态组件,mode为默认
同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式
in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
默认情况下是in-out
上述动画,如果设置mode=”out-in”
mode="out-in"
登录后复制
注意:如果两个标签名相同,是不会执行动画的,若想执行动画,需要给标签设置不同的key来加以区分
i am show
not in show
登录后复制
两个标签名相同的动画,未设置不同的key
如果设置了不同的key,就可以执行动画了
//设置不同的keyi am show
not in show
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Vue.js的计算属性和数据监听
Vue.js的事件绑定 – 内置事件绑定、自定义事件绑定
以上就是Vue.js之css实现过度动画的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2783482.html
