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位置，因为属性的话不存在动画效果，执行时间也可以忽略不计。更不存在线程的问题，我们把所有的元素的定位值设置到这

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