极客观点
项目管理
HarmonyOS
<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>
// 半场动画的最佳实践
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
beforeEnter(el) { // 设置小球的位置
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)”函数中需要写el.offsetWidth，如果不写，过渡效果就没法实现？
写这个是为了保证Dom实时刷新，随便写什么都行，只要能保证Dom实时刷新