关于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>
最后引发这个奇葩问题，我还是得不到最终解析，忘有知道的大神请告知一下，感谢感谢！
关于transition动画下，如果有fixed元素，渲染的奇葩问题的更多相关文章
- ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
- 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
- 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- css3 Transition动画执行时有可能会出现闪烁的bug
css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...
- 解决IOS下不支持fixed的问题
我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focu ...
- 解决transition动画与display冲突的几种方法
如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...
- Swift: 是用Custom Segue还是用Transition动画
用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController.这两个controller之间要互相跳转,A-> ...
- 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...
- ios中fixed元素在滚动布局中的延时渲染问题
在之前做的一个demo中,有个视图是内滚动的,里边有个bar用了fixed,不是fixed在最外层视图的顶部和底部,在微信/safari/chrome/其他浏览器app上都没出现问题. 然后今天,我把 ...
随机推荐
- CFS调度分析(内核版本：2.6.34)
CFS调度分析(内核版本:2.6.34) 1.时间记账 CFS不再有时间片的概念,他维护的是每个进程运行的时间记账 使用调度器实体结构来追踪进程运行记账: <linux/sched.h> ...
- 【luogu P3128 [USACO15DEC]最大流Max Flow】 题解
题目链接:https://www.luogu.org/problemnew/show/P3128 菜 #include <cstdio> #include <cstring> ...
- Android学习笔记_JNI_c调用java代码
1.编写native方法(java2c)和非native方法(c2java): package com.example.provider; public class CallbackJava { // ...
- UML 类关系图(泛化,实现,依赖,关联(聚合,组合))
UML的构造快包含3种: (1) 事物(4种):结构事物,行为事物,分组事物,注释事物 (2) 关系(4种):泛化关系,实现关系,依赖关系,关联关系 (3) 图(10种):用例图,类图,对象图,包图 ...
- iOS之出现（ linker command failed with exit code 1）错误总结
本文出自:http://blog.csdn.NET/hengshujiyi/article/details/21182813 补充:我出现这个错误是一个工程中有两个同名的文件,只要删除掉一个就好了,可 ...
- Qt学习交流（广告）
最近全面学习QT与c++,希望同行能够指教,于是打算建个群QQ群:85439482,欢迎大家,本群主要专注于QT皮肤库积累,软件架构以及标准c++学习.
- Plupload使用API
Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的<input type=”file” />.Plupload会自动侦测当前 ...
- bootstrap到底是用来做什么的
Bootstrap官网:http://v3.bootcss.com/ Bootstrap是Twitter推出的一个用于前端开发的开源工具包.它由Twitter的设计师Mark Otto和Jacob T ...
- window/linux下获取文件MD5
MD5消息摘要算法(英语: MD5 Message-Digest Algorithm), 主要用于确保信息传输过程的一致性校验. 首先介绍两个工具: window: WinMD5Free Linu ...
- 微信小程序bindtap与catchtap的区别
1.什么是事件 (1) 事件是视图层到逻辑层的通讯方式. (2) 事件可以将用户的行为反馈到逻辑层进行处理. (3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. (4) ...