关于transition动画下，如果有fixed元素，渲染的奇葩问题
之前我们机票页面有生成一个低价日历，然后我们有一个需求就是滚动到那个月份，对应显示这个月，然后这个区域是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>
最后引发这个奇葩问题，我还是得不到最终解析，忘有知道的大神请告知一下，感谢感谢！
