小球动画中的问题！！！

Question

代码如下：

	 enter(el) {
        /*eslint-disable no-unused-vars*/
        let rf = el.offsetHeight;
        this.$nextTick(() => {
          let inner = el.getElementsByClassName("inner-hook")[0];
          el.style.display = ""; // 让小球显现
          el.style.webkitTransform = "translate3d(0,0,0)";
          el.style.transform = "translate3d(0,0,0)";
          inner.style.webkitTransform = "translate3d(0,0,0)";
          inner.style.transform = "translate3d(0,0,0)";
        });
      },
	  

let rf = el.offsetHeight; // 为啥要写这个，能具体介绍下吗？

Answer 1

ustbhuangyi 2019-09-24 11:10:15

强制让浏览器重绘，因为你先把小球移到了购物车区域，然后再做动画把它设置为原位，如果不强制让浏览器重绘一次，那么浏览器就认为小球没有移动过，就不会有动画效果了。