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 ...
随机推荐
- 最近项目用到Dubbo框架,临时抱佛脚分享一下共探讨。
1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...
- WebServer中异步操作的一些总结
1.异步操作本身不会改善IO的性能 2.当任务多为IO操作时普通的工作线程将会减少,使CPU对工作线程的维护降低,从而提高CPU对其它任务的利用率 3.如果专用的IO线程,需要执行的专用任务较多时,专 ...
- Windows Azure服务
一. 存储服务 Azure存储服务是云端的文件存储服务,通过http/https访问和权限控制有以下三种特性 1.本地数据中心冗余 (Local Redundant Storage,LRS) 在一个位 ...
- header("location:test.php")跳转成功需要注意的
header("location:test.php")跳转成功除了需要注意以下三点还有一个前提必须要注意: 1.location和":"号间不能有空格,否则会出 ...
- 好用的排名函数~ROW_NUMBER(),RANK(),DENSE_RANK() 三兄弟
排名函数三兄弟,一看名字就知道,都是为了排名而生!但是各自有各自的特色!以下一个例子说明问题!(以下栗子没有使用Partition By 的关键字,整个结果集进行排序) RANK 每个值一个排名,同样 ...
- Filestream 使用简单步骤
为了减少大文件在数据库的存储对数据库的读写效率造成的压力,多了FileStream这一个功能,下面介绍一下如何快速使用FileStream. 1.开启SqlServer实例对FileStream 的开 ...
- SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace)
SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace) DBA 日常管理工作中,很重要一项工作就是监视数据库文件大小,及日志文件大小.如果你管理数据库的有很 ...
- PowerDesigner新装后的设置
1.设置name不自动等于code 1.1菜单栏选择tools,选择general Options,打开如图1所示界面 1.2选择Dialog,勾掉红框中复选框,点OK即可
- js判断手机访问PC端跳转到手机站
<script type="text/javascript">(function() { //得到域名后缀 var path = location.pathname.s ...
- webkit浏览器常见开发问题
前段时间有人问我一个简单的问题,html如何创建解析的? 我讲了一大堆,什么通过DocumentLoader, CachedResourceLoader, CacheResource, Resourc ...