<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)？
關(guān)于vue中鉤子函數(shù)實現(xiàn)動畫效果
明月笑刀無情
2019-03-14 18:15:22