关于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>

最后引起这个奇葩问题，我仍是得不到最终解析，忘有知道的大神请告知一下，感谢感谢！框架