关于this._reflow触发重绘的疑问

Question

beforeDrop(el) {
        const ball = this.dropBalls[this.dropBalls.length - 1]
        const rect = ball.el.getBoundingClientRect()
        const x = rect.left - 32
        const y = -(window.innerHeight - rect.top - 22)
        el.style.display = ''
        el.style.transform = el.style.webkitTransform = `translate3d(0,${y}px,0)`
        const inner = el.getElementsByClassName(innerClsHook)[0]
        inner.style.transform = inner.style.webkitTransform = `translate3d(${x}px,0,0)`
      },

老师，el.style.display = ‘’ ，这行代码好像是多余的。我的理解是dom元素本身就有display属性了，所以不需要这行代码，直接赋值也没有问题吧。我试过了可以。

dropping(el, done) {
	// 触发重绘
	this._reflow = document.body.offsetHeight
}

老师，这里的this._reflow 触发重绘是vue提供的属性吗？我在vue的文档里面没有找到啊，难道是js原生的？老师能讲解一下吗，不太明白

Answer 1

ustbhuangyi 2019-01-06 23:48:02

el.style.display = ''，是为了把隐藏的小球显示，document.body.offsetHeight 这是 DOM 的 API，可以出发浏览器的重绘，与 Vue 无关

• 慕莱坞21660286 #1

  老师，小球的隐藏显示不是有v-show="ball.show"在控制吗，为什么还要再加el.style.display = ''呢？  试过显示不加display可以，但结束动画不加dispaly="none",小球会先出现在购物车的图标上，然后再消失。

• ustbhuangyi 回复 慕莱坞21660286 #2

  参考这个回答：https://coding.imooc.com/learn/questiondetail/134152.html