I don't understand the principle of CSS animation in Vue.

recently, I am learning the css transition in this vue. I can"t understand the document all the time. What puzzles me most is this animation mechanism. I hope there are bosses to help me solve the problem. Here are my doubts:
1.
< transition name="fade" >

        <div v-show="show" class="content">HelloWorld</div>

< / transition >
< button @ click=handleClick > switch < / button >
< script >

    var vm = new Vue({
        el:"-sharpapp",
        data:{
            show:false
        },
        methods:{
            handleClick(){
                this.show=!this.show
            }
        }
    })
</script>

clipboard.png
helloworld divdivtransition
v-leaveclassopacity=1;
1460000015602923

1460000015602923

1460000015602921?w=606&h=351

Apr.30,2021
The transition of

transition components is divided into two stages: entry and departure. There is only one entry phase from hide to show, and there is no leave,. If there is show to hide, there is departure. This is what you say: l-leave


it is recommended to introduce animate.css animation library . github official website has a specific introduction to the usage. If you still don't understand, you can ask me

.
Menu