Transition of multiple elements

<style>
　　.v-enter,.v-leave-to{
　　　　opacity: 0;
　　}
　　.v-enter-acitve,.v-leave-active{
　　　　opacity: opacity 1s;
　　}
</style>
<div id='app'>
　　<transition>
　　　　<div v-if='show'>hello world</div>
　　　　<div v-else>bye world</div>
　　</transition>
　　<button @click='handleClick'>switch</button>
</div>
<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>
//Front end full stack learning communication circle: 866109386
//For front-end developers with 1-3 years of experience
//Help to break through technical bottleneck and improve thinking ability

According to the previous way of writing, the effect of gradual concealment does not appear the effect it should have, so why? When two elements of if else are switched, dom will be reused as much as possible. It's the reuse of vue and dom that causes the effect of animation not to appear. If you want vue not to reuse dom, I've said before, how to do it? Just give two div s different key values

<div v-if='show' key='hello'>hello world</div>
<div v-else key='bye'>bye world</div>

In this way, you can have an obvious animation effect, the effect of multi element transition animation.

transition also provides a mode attribute. In out displays first and then hides, and out in hides first and then displays

Transition of multiple components

<style>
　　.v-enter, .v-leave-to {
　　　　opacity: 0;
　　}
　　.v-enter-acitve, .v-leave-active {
　　　　transition: opacity 1s;
　　}
</style>
<div id='app'>
　　<transition mode='out-in'>
　　　　<child v-if='show'></child>
　　　　<child-one v-else></child-one>
　　</transition>
　　<button @click='handleClick'>switch</button>
</div>
 
<script>
Vue.component('child',{
　　template:'<div>child</div>'
})
Vue.component('child-one',{
　　template:'<div>child-one</div>'
})
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>
//Front end full stack learning communication circle: 866109386
//For front-end developers with 1-3 years of experience
//Help to break through technical bottleneck and improve thinking ability

This is the transition of multiple components. We use the above method to replace the sub components. Then we use the dynamic component instead

<style>
　　.v-enter, .v-leave-to {
　　　　opacity: 0;
　　}
　　.v-enter-acitve, .v-leave-active {
　　　　transition: opacity 1s;
　　}
</style>
<div id='app'>
　　<transition mode='out-in'>
　　　　<component :is='type'></component>
　　</transition>
　　<button @click='handleClick'>switch</button>
</div>
 
<script>
Vue.component('child',{
　　template:'<div>child</div>'
})
Vue.component('child-one',{
　　template:'<div>child-one</div>'
})
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　type:'child'
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.type = (this.type === 'child' ? 'child-one' : 'child')
　　　　}
　　}
})
</script>

This also realizes the transition effect of multiple components.