专栏首页前端杂货铺js实现css3的过渡,需要注意的一点(浏览器优化)

js实现css3的过渡,需要注意的一点(浏览器优化)

大部分浏览器对元素几何改变时候的重排做了优化。据说是这样子,一定时间内本应多次重排的改变,浏览器会hold住,仅一次重排。其中如果使用分离的一步处理过程,例如计时器,依然多次重排。例如,当我们应用transition动画的时候,希望从0px变化到100px. 你如果如下代码:

dom.style.left = "0px";
dom.style.left = "100px";

元素是不会从0~100像素动画的,因为现代浏览器有自己的优化机制,它只会处理后面的dom.style.left = "100px",

可以通过访问元素的OffsetHeight属性,来让起重绘,$.fn.redraw = function(){ $(this).each(function(){ var redraw = this.offsetHeight; });};

知道为啥这样访问offsetHeight可以实现功能吗??原因很简单,访问元素的offsetHeight属性会导致该元素的回流,重新计算元素的位置。但是这样实现动画可能会造成性能问题。

之前转载的一篇翻译文章提到了 “影响回流的因素”:

  1. 调整窗口大小(Resizing the window)
  2. 改变字体(Changing the font)
  3. 增加或者移除样式表(Adding or removing a stylesheet)
  4. 内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in an input box)
  5. 激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))
  6. 操作 class 属性(Manipulating the class attribute)
  7. 脚本操作 DOM(A script manipulating the DOM)
  8. 计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)  根据此可以实现一个jquery插件,让元素回流并重绘。ex. el.style.left=20px; a = el.offsetHeight;el.style.left=22px;
  9. 设置 style 属性的值 (Setting a property of the style attribute)

还可以通过setTimeout来实现。

h.style.marginTop = '50px'
setTimeout(function(){
                h.style.marginTop = '150px'
            },130)

具体的过渡实现,可参考maccaw的博客:http://blog.alexmaccaw.com/css-transitions

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一步步学会用docker部署应用(nodejs版)

    docker是一种虚拟化技术,可以在内核层隔离资源。因此对于上层应用而言,采用docker技术可以达到类似于虚拟机的沙盒环境。这大大简化了应用部署,让运维人员无...

    欲休
  • 绝对定位下的盒模型

    元素被绝对定位,那么元素将会脱离正常流(normal flow),并依据包含块来定位。包含块的概念及其判定可以看这里。 在负margin的应用一文中,我们提到了...

    欲休
  • html标签属性(attribute)和dom元素的属性(property)

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难。从对象来说,attribute是html文档...

    欲休
  • SAS-输出文档生成目录的方法

    前段时间有一个需求,利用SAS实现文档目录的自动生成。这里小编没有限定文档的类型,是因为本文将分享两种类型文档(PDF/RTF)通过SAS自动生成目录的方法。

    Setup
  • CentOS 6.X 安装中文字体

    由于业务需要,需要对CentOS6.9添加中文字体支持 安装工具包 yum install -y fontconfig mkfontscale 安装完成后...

    shaonbean
  • PostgreSQL的insert解析

    1、首先需要从slot中取出tuple值,HeapTupleTableSlot.tuple

    yzsDBA
  • user-modify跟style标签可真是天生一对?

    前来挖墙脚的是html中的contenteditable,他是一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在...

    聪明的汤姆
  • Polynote, 一个Jupyter Notebook杀手?

    第一次听说Polynote时,我没有留下深刻的印象。我想,也许这是一本布局不同的Jupyter笔记本。几个月后快进,我再次遇到了polynote。只是这一次我想...

    计算机与AI
  • 什么是机器人视觉系统的硬件与接近觉传感器?

    1、图示为视觉的硬件组成, 视觉系统的硬件组成 答案: ? 2、图示为接近觉传感器, ?

    机器人网
  • 备战CKA每日一题——第4天

    看到大家这几天的答题情况,还是很不错的,但是还需要认真审题,按要求答题,还有就是记得练习查询官网文档,并把标签分类保存下来。

    我的小碗汤

扫码关注云+社区

领取腾讯云代金券