Vue 中多个元素或组件的过渡动画
实现多个元素的过渡动画的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Vue 中多个元素或组件的过渡动画</title>
<script src = './vue.js'></script>
<!-- <script src = './velocity.js'></script> -->
<style>
.v-enter,.v-leave-to{
opacity:0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id ='root'>
<transition>
<div v-if ="show" key="hello">Hello World</div>
<div v-else key="bye">Bye World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
},
handleBeforeEnter:function(el){
el.style.opacity = 0;
},
handleEnter:function(el,done){
Velocity(el,{opacity:1},
{duration:1000,
complete:done
})
},
handleAfterEnter:function(el){
console.log("动画结束")
}
}
})
</script>
</body>
</html>输出：点击--- Hello World 逐渐隐藏（1s），Bye World 直接出现---再次点击--- Bye World 逐渐隐藏 ，Hello World 直接出现
防止 Vue 中 div 出现复用，添加不同的 key值
<transition>
<div v-if ="show" key="hello">Hello World</div>
<div v-else key="bye">Bye World</div>
</transition>
Vue 还提供 mode 配置参数 设置多个属性切换时的效果
（in-out : 多个元素显示时，先显示的元素先进入，要隐藏的元素才会被隐藏；）
<div id ='root'>
<transition mode="in-out">
<div v-if ="show" key="hello">Hello World</div>
<div v-else key="bye">Bye World</div>
</transition>输出：点击--- Bye World 逐渐出现（1s）Hello World才隐藏---再次点击--- Hello World 逐渐出现 （1s），Bye World 才隐藏
（out-in : 多个元素显示时，要隐藏的元素先隐藏，要显示的元素先进入；）
<transition mode="out-in">
<div v-if ="show" key="hello">Hello World</div>
<div v-else key="bye">Bye World</div>
</transition>输出：点击--- Hello World逐渐隐藏（1s）Bye World 出现---再次点击--- Bye World 逐渐隐藏 （1s）， Hello World才出现
实现多个组件的过渡动画的效果
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Vue 中多个元素或组件的过渡动画</title>
<script src = './vue.js'></script>
<!-- <script src = './velocity.js'></script> -->
<style>
.v-enter,.v-leave-to{
opacity:0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id ='root'>
<transition mode="out-in">
<child v-if ="show" ></child>
<child-one v-else></child-one>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>输出：点击--- child逐渐隐藏（1s）child-one 出现---再次点击--- child-one 逐渐隐藏 （1s）， child才出现
通过动态组件来实现
component 来定义动态组件，通过 is 属性来将组件和定义的组件名做绑定，来控制执行那个组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Vue 中多个元素或组件的过渡动画</title>
<script src = './vue.js'></script>
<!-- <script src = './velocity.js'></script> -->
<style>
.v-enter,.v-leave-to{
opacity:0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id ='root'>
<transition mode="out-in">
<component :is="type"></component>
<!-- <child v-if ="show" ></child>
<child-one v-else></child-one> -->
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
var vm = new Vue({
el:'#root',
data:{
type:'child'
},
methods:{
handleClick:function(){
this.type = this.type === 'child' ? 'child-one' : 'child'
//type 是否为 child ，如果是则赋值为 child-one,不是则赋值为 child
}
}
})
</script>
</body>
</html>输出：点击--- child逐渐隐藏（1s）child-one 出现---再次点击--- child-one 逐渐隐藏 （1s）， child才出现
methods:{
handleClick:function(){
this.type = this.type === 'child' ? 'child-one' : 'child'
}判断type 是否为 child ，如果是则赋值为 child-one,不是则赋值为 child
