Vue的動(dòng)畫鉤子函數(shù)leave函數(shù)

<div id="app">

    <fade :visible='visible'>
        <div>16個(gè)歐洲國(guó)家簽署首份《日內(nèi)瓦公約》</div>
    </fade>
    <button @click='handleClick'>切換狀態(tài)</button>
</div>
<script>
    Vue.component('fade',{
        props:['visible'],
        template:`
            <transition
                :css='false'
                @before-enter='beforeEnter'
                @enter='enter'
                @before-leave='beforeLeave'
                @leave='leave'
            >
                <slot v-if='visible'></slot>
            </transition>
        `,
        methods:{
            beforeEnter(el){
                el.style.opacity=0
            },
            enter(el,done){
                el.offsetWidth;
                el.style.opacity=1;
                el.style.transition='opacity 2s ease .1s';
                done()
            },
            beforeLeave(el){
                el.style.opacity=1;    
            },
            leave(el,done){
                el.offsetWidth;
                el.style.opacity=0;
                el.style.transition='opacity 3s ease .1s';
                done()
                
            }
        }
    })
    var vm = new Vue({
        el:"#app",
        data:{
            visible:false,
        },
        methods:{
            handleClick(){
                this.visible=!this.visible
            }
        }

    })
</script>

想寫一個(gè)點(diǎn)擊按鈕div實(shí)現(xiàn)過渡顯示與隱藏的效果。用的是vue的動(dòng)畫的鉤子函數(shù)，但是為啥離開的動(dòng)畫不生效？