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

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

CSS3 动画效果带来的bug的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  3. CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  4. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. 第八十三节,CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介     CSS3提 ...

  6. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  7. 35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

  8. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  9. 第 26 章 CSS3 动画效果

    学习要点: 1.动画简介 2.属性详解 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 的动画效果,可以通过类似 Flash 那样的关键帧模式控制运行. 一.动画简介 CSS ...

随机推荐

  1. 最近项目用到Dubbo框架,临时抱佛脚分享一下共探讨。

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  2. WebServer中异步操作的一些总结

    1.异步操作本身不会改善IO的性能 2.当任务多为IO操作时普通的工作线程将会减少,使CPU对工作线程的维护降低,从而提高CPU对其它任务的利用率 3.如果专用的IO线程,需要执行的专用任务较多时,专 ...

  3. Windows Azure服务

    一. 存储服务 Azure存储服务是云端的文件存储服务,通过http/https访问和权限控制有以下三种特性 1.本地数据中心冗余 (Local Redundant Storage,LRS) 在一个位 ...

  4. header("location:test.php")跳转成功需要注意的

    header("location:test.php")跳转成功除了需要注意以下三点还有一个前提必须要注意: 1.location和":"号间不能有空格,否则会出 ...

  5. 好用的排名函数~ROW_NUMBER(),RANK(),DENSE_RANK() 三兄弟

    排名函数三兄弟,一看名字就知道,都是为了排名而生!但是各自有各自的特色!以下一个例子说明问题!(以下栗子没有使用Partition By 的关键字,整个结果集进行排序) RANK 每个值一个排名,同样 ...

  6. Filestream 使用简单步骤

    为了减少大文件在数据库的存储对数据库的读写效率造成的压力,多了FileStream这一个功能,下面介绍一下如何快速使用FileStream. 1.开启SqlServer实例对FileStream 的开 ...

  7. SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace)

      SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace) DBA 日常管理工作中,很重要一项工作就是监视数据库文件大小,及日志文件大小.如果你管理数据库的有很 ...

  8. PowerDesigner新装后的设置

    1.设置name不自动等于code 1.1菜单栏选择tools,选择general Options,打开如图1所示界面 1.2选择Dialog,勾掉红框中复选框,点OK即可

  9. js判断手机访问PC端跳转到手机站

    <script type="text/javascript">(function() { //得到域名后缀 var path = location.pathname.s ...

  10. webkit浏览器常见开发问题

    前段时间有人问我一个简单的问题,html如何创建解析的? 我讲了一大堆,什么通过DocumentLoader, CachedResourceLoader, CacheResource, Resourc ...