首页 > 代码库 > CSS3 动画效果带来的bug

CSS3 动画效果带来的bug

css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题

比如把一个DIV从A点移动到B点。JS为DIV.style.left=B;

但是当我们使用上面的transition属性后,A点移动到B点是2秒内完成的,当执行JS代码时候,DIV还没到应该的位置,那么,在Div.style.left=B; console.log(Div.offsetLeft);

这样console出来的是起点坐标而不是终点坐标。

即使你让其JS线程主动挂起使用如setTimeout,0这样的还是不行,估计CSS3动画没有使用GUI线程,只能使用setTimeout 2000后读取offsetLeft才能得到正确的值。

 

那么,在像响应式布局使用CSS3动画效果时,当窗口大小改变,新的元素被添加的时候也会引起元素错位等问题。因为你在for循环全部的元素的时候,引发的重排版的时候,下一行元素的定位依赖于上

一行元素的定位,当上一行元素还在执行动画效果,还没到应该到的位置的时候,下一行元素就已经开始计算了,这时候元素的位置计算就是错误的。必须要等上一个元素的完全到位了才能得到其正确的

位置。

解决方法:把应该的定位储存到这个元素的属性中而不是直接设置为其的X,Y位置,因为属性的话不存在动画效果,执行时间也可以忽略不计。更不存在线程的问题,我们把所有的元素的定位值设置到这

个元素的属性中。下一个元素判断位置直接读取上一行元素中的属性值,即使上一行的元素还在跑往应该的位置上也不会出现位置重复了。