Vue的动画钩子函数leave函数

Question

<div id="app">

    <fade :visible='visible'>
        <div>16个欧洲国家签署首份《日内瓦公约》</div>
    </fade>
    <button @click='handleClick'>切换状态</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>

想写一个点击按钮div实现过渡显示与隐藏的效果。用的是vue的动画的钩子函数，但是为啥离开的动画不生效？

Answer 1

你调用了done函数，意味着已经执行完成，vue自动的移除节点，也就不存在动画了

Answer 2

老哥搞明白了吗?同样的疑惑,按照楼上的说法 leave 里面不调用done 确实可以,但是不调用done,动画结束以后页面元素其实还是存在的,并没有被移除