有关css重绘和回流的一个例子

苏丹发布于2019-08-20 15:32 / 2573人阅读

摘要：最近做了一个导航条动画，鼠标的时候会有一个可移动的下划线，结构大致如下使用了样式在页面生成的时候根据板块不同需要初始化的位置。按理说修改会导致页面的重绘和回流，但是实际上却没有达到预想的效果。

最近做了一个导航条动画，鼠标hover的时候会有一个可移动的下划线，html结构大致如下


    
        AAA
        BBB
        CCC
        DDDD

slider-underline使用了transition样式：

.slider-underline {
    position: absolute;
    border-width: 1px 0;
    border-style: solid;
    border-color: #444;
    height: 0px;
    bottom: 12px;
    width: 26px;
    left : -26px;
    -webkit-transition: left 0.2s cubic-bezier(0.16, 0.71, 0.46, 1.43);
       -moz-transition: left 0.2s cubic-bezier(0.16, 0.71, 0.46, 1.43);
         -o-transition: left 0.2s cubic-bezier(0.16, 0.71, 0.46, 1.43);
            transition: left 0.2s cubic-bezier(0.16, 0.71, 0.46, 1.43);
}

在页面生成的时候根据板块不同需要初始化slider-underline的位置。

var underline_width = $(".slider-underline").width();
var active_position = $(".nav-sliderbar .actived").length ? $(".nav-sliderbar .actived").width()/2 + $(".nav-sliderbar .actived").position().left - underline_width/2 : - underline_width;
//上面两句是计算的导航条滑块的初始的位置，正好在激活的板块对应位置的下方。
$(".slider-underline").css("left", active_position+"px");

由于slider-underline默认有transition，因此在页面刷新初始化其left位置的时候就会触发动画效果。这个体验不是很好，希望能在初始化的时候不触发这个动画，因此考虑了将动画效果做成一个类：

.underline-bezier {
    -webkit-transition: left 0.2s cubic-bezier(0.16, 0.71, 0.46, 1.43);
       -moz-transition: left 0.2s cubic-bezier(0.16, 0.71, 0.46, 1.43);
         -o-transition: left 0.2s cubic-bezier(0.16, 0.71, 0.46, 1.43);
            transition: left 0.2s cubic-bezier(0.16, 0.71, 0.46, 1.43);
}

js底下添加：

   $(".slider-underline").css("left", active_position+"px");
   $(".slider-underline").addClass("underline-bezier");

然而此处出现了问题，这么做了页面效果并没有变化。
按理说修改left会导致页面的重绘和回流，但是实际上却没有达到预想的效果。

翻阅一些资料后，个人得出的结论是，浏览器为了减少重绘的次数，会维护一个flush队列，当有需要重排的时候将操作放入队列，队列满时再一次性重绘。所以上面这两句被浏览器合并到一起写入了。

鉴于这个原因，我尝试出了两种解决办法：

使用setTimeout

setTimeout(function() {
    $(".slider-underline").addClass("underline-bezier");
},0);

这个方法已开始写的时候只是尝试性的，但是达到了需要的效果，具体原因究竟是因为浏览器任务插入的问题还是因为执行其中函数前flush队列已满触发了重绘，还真正没有搞清楚。

强制提前flush队列
当获取以下属性的时候，浏览器为了获取准确的位置会强制浏览器提前flush队列。

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

width,height

getComputedStyle() / currentStyle

因此将js改为：

$(".slider-underline").css("left", active_position+"px");
var get_left = $(".slider-underline").css("left");
$(".slider-underline").addClass("underline-bezier");

就能达到预想的效果了。

私有云 GPU服务器 jsp css例子有关仓库的数据有关大数据的 asp有关的书

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82322.html

有关css重绘和回流的一个例子

摘要：最近做了一个导航条动画，鼠标的时候会有一个可移动的下划线，结构大致如下使用了样式在页面生成的时候根据板块不同需要初始化的位置。按理说修改会导致页面的重绘和回流，但是实际上却没有达到预想的效果。最近做了一个导航条动画，鼠标hover的时候会有一个可移动的下划线，html结构大致如下 AAA BBB CCC DD...

JellyBool 2019-08-29 12:19 评论0 收藏0
浏览器渲染机制与相应优化策略

摘要：浏览器渲染树我们假设响应后和文件已经齐备了，此时浏览器会怎么做呢当前响应浏览器的普适渲染方式首先，浏览器会根据文件生成树，载入文件构建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 浏览器渲染树我们假设HTTP响应后HTML和CSS、JavaScript文件已经齐备了，此时浏览器会怎么做呢？当前HTTP响应浏览器...

suxier 2019-08-29 12:15 评论0 收藏0
浏览器渲染机制与相应优化策略

摘要：浏览器渲染树我们假设响应后和文件已经齐备了，此时浏览器会怎么做呢当前响应浏览器的普适渲染方式首先，浏览器会根据文件生成树，载入文件构建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 浏览器渲染树我们假设HTTP响应后HTML和CSS、JavaScript文件已经齐备了，此时浏览器会怎么做呢？当前HTTP响应浏览器...

sushi 2019-08-21 15:27 评论0 收藏0
浏览器渲染机制与相应优化策略

摘要：浏览器渲染树我们假设响应后和文件已经齐备了，此时浏览器会怎么做呢当前响应浏览器的普适渲染方式首先，浏览器会根据文件生成树，载入文件构建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 浏览器渲染树我们假设HTTP响应后HTML和CSS、JavaScript文件已经齐备了，此时浏览器会怎么做呢？当前HTTP响应浏览器...

spacewander 2019-08-01 16:32 评论0 收藏0
你真的了解回流和重绘吗

摘要：对于复杂动画效果使用绝对定位让其脱离文档流对于复杂动画效果，由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流。硬件加速加速比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书...

RyanHoo 2019-08-02 12:14 评论0 收藏0