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位置,因为属性的话不存在动画效果,执行时间也可以忽略不计。更不存在线程的问题,我们把所有的元素的定位值设置到这
个元素的属性中。下一个元素判断位置直接读取上一行元素中的属性值,即使上一行的元素还在跑往应该的位置上也不会出现位置重复了。
CSS3 动画效果带来的bug的更多相关文章
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
- 鼠标悬停css3动画效果
下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 第八十三节,CSS3动画效果
CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介 CSS3提 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- 35个让人惊讶的CSS3动画效果
1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- 第 26 章 CSS3 动画效果
学习要点: 1.动画简介 2.属性详解 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 的动画效果,可以通过类似 Flash 那样的关键帧模式控制运行. 一.动画简介 CSS ...
随机推荐
- django 验证用户是否登陆
第一步 指定一下登陆url. url(r'^accounts/login/$', include(xadmin.site.urls)), 由于我用的xadmin故而指向了xadmin,如果使用默认的a ...
- VisualSVN Server的配置和使用方法 图文
转载 http://www.jb51.net/article/17365.htm VisualSVN Server是免费的,而VisualSVN是收费的.VisualSVN是SVN的客户端,和Visu ...
- 一位资深开发的个人经历 【转自百度贴吧 java吧 原标题 4年java 3年产品 现在又开始做android了】
楼主2007年从一家天津的三流大学毕业.毕业前报了一个职位培训,毕业后可以推荐工作.因为推荐的公司都是北京的,所以就来北京了. 找了一个月工作,没有找到要我的,就在出租屋里宅了起来,打着考研的旗号,又 ...
- Mac OS 文件、文件夹重命名的方法
在Mac OS中,文件和文件名重命名的方法非常简单 选中你想要命名的文件或者文件夹,按回车,可以直接重命名,输入你要修改的内容,确认后,再按回车就OK啦--- 希望能对你有所帮助^_^
- sshd安装
centos yum install openssh-server #chkconfig --level 2345 sshd on #service sshd restart 重新启动 #netsta ...
- C#参考书的链接推荐
Visual C#.NET入门与提高http://download.chinaitlab.com/soft/6330.htm 使用Visual C# 开发asp.NET入门http://downloa ...
- 安装docker后,VMware网络无法访问了,VMware重置网络设置
1.vmware虚拟机处于关闭状态 2.vmware程序->edit(编辑)-->左下角 "Restore Default"恢复默认设置 [恢复]完成后 ...
- CocoaPods安装以及相关问题解决
Mac OS X上安装 Ruby环境 安装RVM $ curl -L https://get.rvm.io | bash -s stable 关闭终端,新开另外一个终端(新打开的终端会自动载入RVM环 ...
- Linux下python安装升级详细步骤 | Python2 升级 Python3
Linux下python升级步骤 Python2 ->Python3 多数情况下,系统自动的Python版本是2.x 或者yum直接安装的也是2.x 但是,现在多数情况下建议使用3.x 那么如 ...
- SQL Server 使用游标更新数据库中的数据(使用存储过程)
ALTER PROCEDURE [dbo].[POR_CURSOR_FOR_UPDATE] --创建存储过程 AS BEGIN SET nocount ON --忽略行数显示 DECLARE Upda ...