關於transition動畫下，若是有fixed元素，渲染的奇葩問題

時間 2019-12-14

標籤關於 transition 動畫若是 fixed 元素渲染奇葩問題简体版

原文原文鏈接

以前咱們機票頁面有生成一個低價日曆，而後咱們有一個需求就是滾動到那個月份，對應顯示這個月，而後這個區域是fixed定位的，而後奇怪的事情發生了，就是低價日曆的動畫執行完後，修改頁面的html卻沒有正常更新。（由於那個區域顯示有點問題，我截圖的地方也是fixed元素）

而後你們能夠看到以上截圖，改變了dom後頁面沒有從新渲染（能夠這裏用詞有誤，反正是沒有渲染正常。）css

而後我就找了小釵（http://www.cnblogs.com/yexiaochai/）一塊兒幫我看問題，而後看了一個下午，當天只能得出一個結論就是：動畫可能影響了fixed元素的渲染。

昨天和今天，我一直找真正致使bug的緣由，由於咱們業務代碼幾千行，因此很差定位，因此我只好用最笨的方法，一點點刪代碼，而後最後把不可能影響到的代碼和樣式通通刪掉，直至確認出是日曆組件自己的問題。html

幸虧我認識框架組的同事以前拿了源碼。好爲了快速進入，捨棄前戲部分，我就不說定位過程了，最後得出的結論就是的確是動畫影響了，下面咱們看看組件動畫作了寫什麼事情：

而後這裏我還不肯定animate方法裏作了神馬事情，因此我再進去animate的源碼裏看
而後這個animate函數調用了anim函數，幾個參數你們都屬性吧，分別是修改的屬性（可多個）、過渡時間、過渡效果、動畫結束回調函數、延時執行時間。css3

方便初學者理解，我加了幾行註釋
cssValues打個斷點輸出，看下圖，其實就是把東西轉變成css3的transtion來達到這個過渡效果。web

而後我再分別寫了幾個測試的小例子：
懶得寫能夠直戳如下幾個連接：

一、在頁面出來前display:none;的例子
二、在動畫結束後append，fixed元素的例子
三、在頁面出來前display:!none;的例子
四、去掉回調裏重置transform的例子
五、addClass模擬animate函數的例子

分別寫了5個例子（看每一個例子前必強清除緩存），下面我盡簡單直接說一下分別什麼不同。
例子1，就是若是父級一開始是display:none; 那麼子級的fixed的元素修改渲染必然有問題(至少我測試下來是這樣)：

例子2，若是動畫結束後append fixed元素，那個這個元素能正常渲染：

例子3，若是父級原本不是display:none;那麼原本存在的子級fixed元素能正常渲染，動畫過程當中加入的fixed元素不能正常渲染。

例子4，若是我把執行動畫結束後的transform重置去掉，那麼不管是否display，和動畫期間加入的fixed元素修改後都能正常渲染。

例子5，若是我用addClass，來模擬animate的效果，setTimeout10秒後重置transform，在清除前不管是否display:none，動畫過程加入的元素都能修改、正常渲染，可是10秒transform強制設置爲none後，渲染均有問題。

緩存

單個版本代碼以下，供自行修改嘗試。app

    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        .transilate_wrap {
            width: 100%;
            height: 100%;
            display: block;
            background: #add8e6;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .fixed1 {
            width: 100%;
            height: 30px;
            display: inline-block;
            background: red;
            position: fixed;
        }

        .append_fixed {
            width: 100%;
            height: 40px;
            top: 50px;
            position: fixed;
            background: green;
        }
        .append_fixed2 {
            width: 100%;
            height: 40px;
            top: 120px;
            position: fixed;
            background: green;
        }
    </style>
</head>
<body>

<div class="transilate_wrap" style="position: absolute; z-index: 3001; top: 0px; right: 0px; left: 0px;display: none;">
    <div class="fixed1">
        before animate fixed
    </div>
</div>
</body>

<script src="./zepto.ctrip.js"></script>
<script>
    var $el = $('.transilate_wrap');

    $el.css({
        '-webkit-transform': 'translate(100%, 0)',
        transform: 'translate(100%, 0)'
    }).show().animate({
                '-webkit-transform': 'translate(0, 0)',
                transform: 'translate(0, 0)'
            }, 1500, 'ease-in-out', function () {
                $el.css({
                    '-webkit-transform': '',
                    transform: ''
                });
            });

    setTimeout(function () {
        $el.append('<h1 class="append_fixed">during animate</h1>');
    }, 100);


   /* setTimeout(function () {
        $el.append('<h1 class="append_fixed2">after animate</h1>');
    }, 1600);*/


</script>

最後引起這個奇葩問題，我仍是得不到最終解析，忘有知道的大神請告知一下，感謝感謝！框架

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。