vue中组件的过渡动画
2018-11-21 11:54
537 查看
1. 和多个元素的过渡一样,用组件来替换transition中包裹的标签
[code] <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </style> </head> <body> <div id="demo"> <button @click="show = !show">click me</button> <transition name="fade" mode="in-out"> <child-one v-if="show"></child-one> <child-two v-else></child-two> </transition> </div> <script> Vue.component('child-one', { template: `<div>child-one</div>` }) Vue.component('child-two', { template: `<div>child-two</div>` }) new Vue({ el: '#demo', data: { show: true }, }) </script>
2. 动态组件:component组件 :is 属性,来实现组件的过渡效果
[code] <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </style> </head> <body> <div id="demo"> <button @click="handleClick">click me</button> <transition name="fade" mode="in-out"> <component :is="type"></component> </transition> </div> <script> Vue.component('child-one', { template: `<div>child-one</div>` }) Vue.component('child-two', { template: `<div>child-two</div>` }) new Vue({ el: '#demo', data: { type: 'child-one' }, methods:{ handleClick () { this.type = this.type === 'child-one' ? 'child-two' : 'child-one' } } }) </script>
阅读更多
相关文章推荐
- vue中用组件封装过渡动画
- Vue动画--组件的过渡
- Vue过渡(动画)- transition组件
- Vue 过渡(动画)transition组件案例详解
- vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
- [原]浅谈vue过渡动画,简单易懂
- vue实现多个元素或多个组件之间动画效果
- Vue动画--两个元素过渡
- vue 多组件过渡
- vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
- vue 网格 过渡 动画
- vue过渡动画
- vue中多个元素或组件的过渡
- vue学习第9天,过渡 动画
- vue组件切换时使用过渡(transition)时应该注意的一些事项
- vue 简单动画过渡
- 前端框架vue.js系列(11):元素动画过渡效果
- (六)vue开发 - transition之页面切换过渡动画
- vue学习第10天,过渡 动画
- Vue相关(过渡动画)