目录
一、多个元素之间的过渡
在transition过渡动画标签里面有多个元素
<templete>
<div>
<transition
mode="out-in"
>
<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">Bye world</div>
<!-- 一定要加key值，不然vue的dom复用机制会使动画渲染不上-->
</transition>
<button @click="handleClick">切换</button>
</div>
</templete>
<style>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
</style>
<script>
export default {
name: "animate-test",
data(){
return{
show:true,
}
},
methods:{
handleClick(){
this.show = !this.show
},
}
}
</script>transition不加name属性，则css样式为默认的v-enter等
transition还提供了一个mode属性，用来设置多个元素切换时的效果：out-in为先隐藏后显示，in-out为先显示后隐藏
效果：
二、动态组件的过渡
先定义两个子组件、使用component表现实现动态组件，动态组件使用看Vue06---异步组件和动态组件_m0_37756431的博客-CSDN博客
<templete>
<div>
<transition
mode="out-in"
>
<!-- 动态组件-->
<component :is="type"></component>
</transition>
<button @click="handleComp">组件动画</button>
</div>
</templete>
<style>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
</style>
<script>
export default {
name: "animate-test",
data(){
return{
show:true,
}
},
components:{
'child':{
template:"<div>child</div>"
},
'child-one':{
template:"<div>child-one</div>"
},
},
methods:{
handleComp(){
this.type = this.type === 'child' ? 'child-one' : "child"
},
}
}
</script>三、列表过渡
使用<transition-group></transition-group>包裹，相当于循环出的div标签外面都包裹了<transition></transition>标签。
<transition-group>
<div v-for="(item,index) in list" :key="item.id">
{
{item.context}}
</div>
</transition-group>
<button @click="handleBtnClick">列表过渡</button>
<style>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
</style>
<script>
export default {
name: "animate-test",
data(){
return{
list:[],
count:0,
}
},
methods:{
handleBtnClick(){
this.list.push({
id:this.count++,
context:"hello world"
})
},
}
}
</script>效果：
