有關css重繪和回流的一個例子

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

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

最近做了一個導航條動畫，鼠標hover的時候會有一個可移動的下劃線，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);
}

在頁面生成的時候根據(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;
//上面兩句是計算的導航條滑塊的初始的位置，正好在激活的板塊對應位置的下方。
$(".slider-underline").css("left", active_position+"px");

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

.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會導致頁面的重繪和回流，但是實際上卻沒有達到預想的效果。

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

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

使用setTimeout

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

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

強制提前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例子有關倉庫的數(shù)據(jù) 有關大數(shù)據(jù)的 asp有關的書

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111813.html

有關css重繪和回流的一個例子

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

蘇丹 2019-08-20 15:32 評論0 收藏0
瀏覽器渲染機制與相應優(yōu)化策略

摘要：瀏覽器渲染樹我們假設響應后和文件已經(jīng)齊備了，此時瀏覽器會怎么做呢當前響應瀏覽器的普適渲染方式首先，瀏覽器會根據(jù)文件生成樹，載入文件構(gòu)建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 瀏覽器渲染樹我們假設HTTP響應后HTML和CSS、JavaScript文件已經(jīng)齊備了，此時瀏覽器會怎么做呢？當前HTTP響應瀏覽器...

suxier 2019-08-29 12:15 評論0 收藏0
瀏覽器渲染機制與相應優(yōu)化策略

摘要：瀏覽器渲染樹我們假設響應后和文件已經(jīng)齊備了，此時瀏覽器會怎么做呢當前響應瀏覽器的普適渲染方式首先，瀏覽器會根據(jù)文件生成樹，載入文件構(gòu)建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 瀏覽器渲染樹我們假設HTTP響應后HTML和CSS、JavaScript文件已經(jīng)齊備了，此時瀏覽器會怎么做呢？當前HTTP響應瀏覽器...

sushi 2019-08-21 15:27 評論0 收藏0
瀏覽器渲染機制與相應優(yōu)化策略

摘要：瀏覽器渲染樹我們假設響應后和文件已經(jīng)齊備了，此時瀏覽器會怎么做呢當前響應瀏覽器的普適渲染方式首先，瀏覽器會根據(jù)文件生成樹，載入文件構(gòu)建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 瀏覽器渲染樹我們假設HTTP響應后HTML和CSS、JavaScript文件已經(jīng)齊備了，此時瀏覽器會怎么做呢？當前HTTP響應瀏覽器...

spacewander 2019-08-01 16:32 評論0 收藏0
你真的了解回流和重繪嗎

摘要：對于復雜動畫效果使用絕對定位讓其脫離文檔流對于復雜動畫效果，由于會經(jīng)常的引起回流重繪，因此，我們可以使用絕對定位，讓它脫離文檔流。硬件加速加速比起考慮如何減少回流重繪，我們更期望的是，根本不要回流重繪。回流和重繪可以說是每一個web開發(fā)者都經(jīng)常聽到的兩個詞語，我也不例外，可是我之前一直不是很清楚這兩步具體做了什么事情。最近由于部門內(nèi)部要做分享，所以對其進行了一些研究，看了一些博客和書...

RyanHoo 2019-08-02 12:14 評論0 收藏0