在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue的動畫鉤子函數(shù)leave函數(shù)

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

<div id="app">

    <fade :visible='visible'>
        <div>16個歐洲國家簽署首份《日內(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>

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

回答
編輯回答
初念

你調(diào)用了done函數(shù),意味著已經(jīng)執(zhí)行完成,vue自動的移除節(jié)點(diǎn),也就不存在動畫了

2018年7月17日 22:19