之前我们机票页面有生成一个低价日历，然后我们有一个需求就是滚动到那个月份，对应显示这个月，然后这个区域是fixed定位的，然后奇怪的事情发生了，就是低价日历的动画执行完后，修改页面的html却没有正常更新。（因为那个区域显示有点问题，我截图的地方也是fixed元素） 

然后大家可以看到以上截图，改变了dom后页面没有重新渲染（可以这里用词有误，反正是没有渲染正常。）

然后我就找了小钗（http://www.cnblogs.com/yexiaochai/）一起帮我看问题，然后看了一个下午，当天只能得出一个结论就是：动画可能影响了fixed元素的渲染。

昨天和今天，我一直找真正导致bug的原因，因为我们业务代码几千行，所以不好定位，所以我只好用最笨的方法，一点点删代码，然后最后把不可能影响到的代码和样式统统删掉，直至确认出是日历组件本身的问题。

幸好我认识框架组的同事之前拿了源码。好为了快速进入，舍弃前戏部分，我就不说定位过程了，最后得出的结论就是 的确是动画影响了，下面我们看看组件动画做了写什么事情：

然后这里我还不确定animate方法里做了神马事情，所以我再进去animate的源码里看
然后这个animate函数调用了anim函数，几个参数大家都属性吧，分别是修改的属性（可多个）、过渡时间、过渡效果、动画结束回调函数、延时执行时间。

方便初学者理解，我加了几行注释
cssValues打个断点输出，看下图，其实就是把东西转变成css3的transtion来达到这个过渡效果。

然后我再分别写了几个测试的小例子：
懒得写可以直戳以下几个链接：

1、在页面出来前display:none;的例子
2、在动画结束后append，fixed元素的例子
3、在页面出来前display:!none;的例子
4、去掉回调里重置transform的例子
5、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后，渲染均有问题。

单个版本代码如下，供自行修改尝试。

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

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

关于transition动画下，如果有fixed元素，渲染的奇葩问题的更多相关文章

  1. ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

  2. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  3. 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  4. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  5. 解决IOS下不支持fixed的问题

    我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focu ...

  6. 解决transition动画与display冲突的几种方法

    如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...

  7. Swift: 是用Custom Segue还是用Transition动画

    用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController.这两个controller之间要互相跳转,A-> ...

  8. 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  9. ios中fixed元素在滚动布局中的延时渲染问题

    在之前做的一个demo中,有个视图是内滚动的,里边有个bar用了fixed,不是fixed在最外层视图的顶部和底部,在微信/safari/chrome/其他浏览器app上都没出现问题. 然后今天,我把 ...

随机推荐

  1. HDU 4165 卡特兰

    题意:有n个药片,每次吃半片,吃2n天,那么有多少种吃法. 分析:如果说吃半片,那么一定要吃过一整片,用 ) 表示吃半片,用 ( 表示吃整片,那么就是求一个正确的括号匹配方案数,即卡特兰数. 卡特兰数 ...

  2. Poj 1961 KMP

    题意:给定一个字符串,求他每一个前缀,如果他是周期的,求len/最短循环节. 分析: 复习一下KMP,之前有详细解析. 由于朴素匹配每次移动一位,KMP可以多移动 f[i] 位,f 就是失配函数,失配 ...

  3. 【洛谷P2831】[NOIP2016]愤怒的小鸟

    愤怒的小鸟 题目链接 本来是刷状压DP的,然而不会.. 搜索是比较好想的,直接dfs就行了 我们可以知道两只猪确定一条抛物线 依次处理每一只猪,有以下几种方法: 1.先看已经建立的抛物线是否能打到这只 ...

  4. CodeForces - 598C Nearest vectors（高精度几何 排序然后枚举）

    传送门: http://codeforces.com/problemset/problem/598/C Nearest vectors time limit per test 2 seconds me ...

  5. Oracle块修改跟踪功能

    块修改跟踪功能是指使用二进制文件记录数据库中数据库更改的过程. 其目的是提高增量备份操作的性能,因为RMAN可以使用快修改跟踪文件找到上次执行备份操作后被修改的数据块.这可以节省大量时间,因为如果不这 ...

  6. MySQL配置和启动

    1.首先下载MySQl安装包,解压安装包 打开mysql下面的bin文件夹,双击如图标记的  .exe运行 2.配置Mysql (1)运行程序后点击 next (2)这里有精确配置和标准配置,根据情况 ...

  7. http返回值含义

    1xx:信息响应类,表示接收到请求并且继续处理2xx:处理成功响应类,表示动作被成功接收.理解和接受 3xx:重定向响应类,为了完成指定的动作,必须接受进一步处理4xx:客户端错误,客户请求包含语法错 ...

  8. SmallMQ发布

    最近一直学习,主要处理java的分布式,MQ,RPC,通信,数据库,缓存等方向. 一般现在的MQ都是企业级的,庞大,功能齐全.最主要是代码量大,对于我们这些小程序员而言,太大,修改困难,修复更加困难, ...

  9. Sonar安装-Linux[20171227]

    前言     一款不错的代码质量管理工具Sonar 前期准备     官方参考文档 https://docs.sonarqube.org/display/SONAR/Documentation     ...

  10. centos下安装docker以及docker-composer

    背景 docker已经出来了很久,而我一直想混迹到docker大军中进行冲锋陷阵,恰逢公司项目的需要,因此今天玩了一把docker的安装.使用Docker 一键部署 LNMP+Redis 环境 事先准 ...