小球动画中的问题!!!
来源: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回答
-
强制让浏览器重绘,因为你先把小球移到了购物车区域,然后再做动画把它设置为原位,如果不强制让浏览器重绘一次,那么浏览器就认为小球没有移动过,就不会有动画效果了。
20
相似问题