小球动画中的问题!!!

来源:17-20 购物车小球动画实现(3)

前端是我菜

2019-09-24

代码如下:

	 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; // 为啥要写这个,能具体介绍下吗?

写回答

1回答

ustbhuangyi

2019-09-24

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

2
0

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

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

9868 学习 · 4162 问题

查看课程