关于vue动画没有效果的解决

有时使用动画时，动画可能动都不动 这时添加 el.offsetHeight或许可以解决问题

<div id="app">
    <input type="button" value="加入到购物车" @click='flag=!flag'>
    <transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEtner'>
        <div id="ball" v-show='flag'></div>
    </transition>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: false
        },
        methods: {
            beforeEnter(el) {
                el.style.transform = 'translate(0,0)  scale(1)'
            },
            enter(el, done) {
                console.log(done)
                // el.offsetWidth
                // 为了能让代码正常进行，在设置了结束状态后必须调用一下这个元素的
                // offsetHeight / offsetWeight  只是为了让动画执行
                el.offsetHeight
                el.style.transform = 'translate(300px,500px) scale(0)';
                el.style.transition = 'all 3s'
                // console.log(el.offsetWidth);
                // 让动画继续往下执行
                done()
            },
            afterEtner(el) {
                this.flag = !this.flag;
            }
        },
    });
</script>