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

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

<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>
    // 半場(chǎng)動(dòng)畫的最佳實(shí)踐
    // 創(chuàng)建 Vue 實(shí)例，得到 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，如果不寫，過渡效果就沒法實(shí)現(xiàn)？

回答
編輯回答
有點(diǎn)壞

寫這個(gè)是為了保證Dom實(shí)時(shí)刷新，隨便寫什么都行，只要能保證Dom實(shí)時(shí)刷新

2018年3月29日 09:38