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

来源:5-4 小球飞入动画实现

Leo_纵化

2019-01-06

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原生的?老师能讲解一下吗,不太明白

写回答

1回答

ustbhuangyi

2019-01-06

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

1
2
ustbhuangyi
回复
慕莱坞21660286
参考这个回答:https://coding.imooc.com/learn/questiondetail/134152.html
2019-08-01
共2条回复

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程