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

鍍金池/ 問答/HTML/ 關(guān)于vue中鉤子函數(shù)實現(xiàn)動畫效果

關(guān)于vue中鉤子函數(shù)實現(xiàn)動畫效果

<body>

<div id="app">
    <input type="button" value="加入購物車" @click="flag=!flag">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div class="ball" v-show="flag"></div>
    </transition>
</div>

<script>
    // 半場動畫的最佳實踐
    // 創(chuàng)建 Vue 實例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            flag: false
        },
        methods: {
            beforeEnter(el) {  // 設(shè)置小球的位置
                el.style.transform = 'translate(0, 0)'
            },
            enter(el, done) {
                el.offsetWidth
                el.style.transform = 'translate(100px, 200px)'
                el.style.transition = 'all 0.5s ease'
                done()
            },
            afterEnter(el) {
                // this.flag = this.flag
            }
        }
    });
</script>

</body>
為啥“enter(el, done)”函數(shù)中需要寫el.offsetWidth，如果不寫，過渡效果就沒法實現(xiàn)？

回答
編輯回答
有點壞

寫這個是為了保證Dom實時刷新，隨便寫什么都行，只要能保證Dom實時刷新

2018年3月29日 09:38