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. django 验证用户是否登陆

    第一步 指定一下登陆url. url(r'^accounts/login/$', include(xadmin.site.urls)), 由于我用的xadmin故而指向了xadmin,如果使用默认的a ...

  2. VisualSVN Server的配置和使用方法 图文

    转载 http://www.jb51.net/article/17365.htm VisualSVN Server是免费的,而VisualSVN是收费的.VisualSVN是SVN的客户端,和Visu ...

  3. 一位资深开发的个人经历 【转自百度贴吧 java吧 原标题 4年java 3年产品 现在又开始做android了】

    楼主2007年从一家天津的三流大学毕业.毕业前报了一个职位培训,毕业后可以推荐工作.因为推荐的公司都是北京的,所以就来北京了. 找了一个月工作,没有找到要我的,就在出租屋里宅了起来,打着考研的旗号,又 ...

  4. Mac OS 文件、文件夹重命名的方法

    在Mac OS中,文件和文件名重命名的方法非常简单 选中你想要命名的文件或者文件夹,按回车,可以直接重命名,输入你要修改的内容,确认后,再按回车就OK啦--- 希望能对你有所帮助^_^

  5. sshd安装

    centos yum install openssh-server #chkconfig --level 2345 sshd on #service sshd restart 重新启动 #netsta ...

  6. C#参考书的链接推荐

    Visual C#.NET入门与提高http://download.chinaitlab.com/soft/6330.htm 使用Visual C# 开发asp.NET入门http://downloa ...

  7. 安装docker后,VMware网络无法访问了,VMware重置网络设置

    1.vmware虚拟机处于关闭状态 2.vmware程序->edit(编辑)-->左下角 "Restore Default"恢复默认设置         [恢复]完成后 ...

  8. CocoaPods安装以及相关问题解决

    Mac OS X上安装 Ruby环境 安装RVM $ curl -L https://get.rvm.io | bash -s stable 关闭终端,新开另外一个终端(新打开的终端会自动载入RVM环 ...

  9. Linux下python安装升级详细步骤 | Python2 升级 Python3

    Linux下python升级步骤  Python2 ->Python3 多数情况下,系统自动的Python版本是2.x 或者yum直接安装的也是2.x 但是,现在多数情况下建议使用3.x 那么如 ...

  10. SQL Server 使用游标更新数据库中的数据(使用存储过程)

    ALTER PROCEDURE [dbo].[POR_CURSOR_FOR_UPDATE] --创建存储过程 AS BEGIN SET nocount ON --忽略行数显示 DECLARE Upda ...