Table of contents
1. Transition between multiple elements
2. Transition of dynamic components
1. Transition between multiple elements
There are multiple elements in the transition transition animation tag
<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>If the transition does not add the name attribute, the css style is the default v-enter, etc.
transition also provides a mode attribute, which is used to set the effect when multiple elements are switched: out-in is hidden first and then displayed, in-out is displayed first and then hidden
Effect:
2. Transition of dynamic components
First define two subcomponents, use component performance to realize dynamic components, dynamic components use see Vue06 --- asynchronous components and dynamic components_m0_37756431's blog-CSDN blog
<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>3. List transition
Use <transition-group></transition-group> package, which is equivalent to wrapping <transition></transition> tags outside the looped div tags.
<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>Effect:
