最近在學(xué)這個(gè)vue中的css過渡，看文檔總是有點(diǎn)看不懂，其中最讓我疑惑的是這個(gè)動畫機(jī)制，希望有大佬幫我解惑。以下是我的疑惑之處：
1.疑惑一
<transition name='fade'>

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

</transition>
<button @click=handleClick>切換</button>
<script>

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

這段代碼實(shí)現(xiàn)的是，當(dāng)我點(diǎn)擊切換按鈕實(shí)現(xiàn)helloworld div進(jìn)入和離開的過渡效果。我知道的是當(dāng)我不加過渡效果的時(shí)候，點(diǎn)擊切換按鈕，div就會瞬間完成隱藏或者顯示的效果。當(dāng)我加上transition組件之后，這個(gè)過渡效果和這個(gè)狀態(tài)切換之間的關(guān)系到底是怎樣的？
有的教程是下面兩個(gè)圖片，還涉及到動畫的第一幀第二幀這樣的概念。但是我看著有點(diǎn)迷，特別是離開的時(shí)候的過渡，為啥不能在v-leave這個(gè)class類上設(shè)置opacity=1；還望大佬們幫忙指點(diǎn)迷津