有關(guān)css重繪和回流的一個(gè)例子

JellyBool 發(fā)布于2019-08-29 12:19 / 2576人閱讀

摘要：最近做了一個(gè)導(dǎo)航條動(dòng)畫，鼠標(biāo)的時(shí)候會(huì)有一個(gè)可移動(dòng)的下劃線，結(jié)構(gòu)大致如下使用了樣式在頁面生成的時(shí)候根據(jù)板塊不同需要初始化的位置。按理說修改會(huì)導(dǎo)致頁面的重繪和回流，但是實(shí)際上卻沒有達(dá)到預(yù)想的效果。

最近做了一個(gè)導(dǎo)航條動(dòng)畫，鼠標(biāo)hover的時(shí)候會(huì)有一個(gè)可移動(dòng)的下劃線，html結(jié)構(gòu)大致如下


    
        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);
}

在頁面生成的時(shí)候根據(jù)板塊不同需要初始化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;
//上面兩句是計(jì)算的導(dǎo)航條滑塊的初始的位置，正好在激活的板塊對(duì)應(yīng)位置的下方。
$(".slider-underline").css("left", active_position+"px");

由于slider-underline默認(rèn)有transition，因此在頁面刷新初始化其left位置的時(shí)候就會(huì)觸發(fā)動(dòng)畫效果。這個(gè)體驗(yàn)不是很好，希望能在初始化的時(shí)候不觸發(fā)這個(gè)動(dòng)畫，因此考慮了將動(dòng)畫效果做成一個(gè)類：

.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");

然而此處出現(xiàn)了問題，這么做了頁面效果并沒有變化。
按理說修改left會(huì)導(dǎo)致頁面的重繪和回流，但是實(shí)際上卻沒有達(dá)到預(yù)想的效果。

翻閱一些資料后，個(gè)人得出的結(jié)論是，瀏覽器為了減少重繪的次數(shù)，會(huì)維護(hù)一個(gè)flush隊(duì)列，當(dāng)有需要重排的時(shí)候?qū)⒉僮鞣湃腙?duì)列，隊(duì)列滿時(shí)再一次性重繪。所以上面這兩句被瀏覽器合并到一起寫入了。

鑒于這個(gè)原因，我嘗試出了兩種解決辦法：

使用setTimeout

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

這個(gè)方法已開始寫的時(shí)候只是嘗試性的，但是達(dá)到了需要的效果，具體原因究竟是因?yàn)闉g覽器任務(wù)插入的問題還是因?yàn)閳?zhí)行其中函數(shù)前flush隊(duì)列已滿觸發(fā)了重繪，還真正沒有搞清楚。

強(qiáng)制提前flush隊(duì)列
當(dāng)獲取以下屬性的時(shí)候，瀏覽器為了獲取準(zhǔn)確的位置會(huì)強(qiáng)制瀏覽器提前flush隊(duì)列。

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");

就能達(dá)到預(yù)想的效果了。