-
Notifications
You must be signed in to change notification settings - Fork 543
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
11defa8
commit d7c0ec8
Showing
1 changed file
with
21 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
# 关于小球动画的一些问题解释 | ||
|
||
> 有很多人在问关于小球动画的问题,这里我集中解释一下,如果有其他疑问可以给我留言 | ||
## offsetHieght触发重绘 | ||
|
||
因为浏览器引擎对重拍和重绘做了优化 比如说对元素的改变达到了一定的次数才会发生,那想要立即获得准确的DOM元素,就要手动的触发浏览器重绘,有很多方法都可以触发,比如:offsetHieght、offsetTop、offsetLeft、 offsetWidth、scrollTop、scrollLeft、scrollWidth等等都是可以的 | ||
|
||
## dropballs是干什么用的 | ||
|
||
dropballs是用来存已经显示过动画的小球,这样就可以直接unshift取到值。当然也可以不用这个,直接for循环balls数组判断状态为falsh的数组再改变状态 | ||
|
||
## balls数组里面为什么要存五个小球 | ||
|
||
有人说这里一个小球就够了,我记不清是谁了,在这里解释一下。存多个小球是为了在有连续点击的情况下小球动画也可以显示多个,也就是说可以同时飞多个小球 这里的小球飞入动画时间是400ms 如果只有一个小球 那么只能在第一个小球动画飞入之后也就是400ms之后才能显示另一个小球 但是400ms的时间足够我们点击多次了 这样就会造成视觉上的误差 | ||
|
||
## 小球动画是怎么做的 | ||
|
||
使用css3属性贝塞尔曲线,这个在网上可以在线调试。 | ||
|
||
购物车的坐标点是固定的,可以根据css的px值计算获得。 |