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

JellyBool 發布于2019-08-29 12:19 / 2564人閱讀

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

最近做了一個導航條動畫，鼠標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有關的書

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111813.html

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

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

蘇丹 2019-08-20 15:32 評論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