关于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>
最后引发这个奇葩问题,我还是得不到最终解析,忘有知道的大神请告知一下,感谢感谢!
最新文章
- 在Eclipse彻底删除一个项目
- [转]响应式WEB设计学习(2)—视频能够做成响应式吗
- Flatten 2D Vector
- 解决SSIS中的脚本任务无法调试的问题
- 关闭log4j 输出 DEBUG org.apache.commons.beanutils.*
- Oracle 调度程序(scheduler)摘自一位大神
- NSString、NSMutableString基本用法
- IO流学习小结
- zoj3229 Shoot the Bullet(有源汇有上下界的最大流)
- UESTC_排名表 2015 UESTC Training for Graph Theory<;Problem I>;
- Nginx 配置指令的执行顺序(四)
- C语言第三次博客作业
- redis数据库的基础
- 记一次深度系统安装至windows系统盘提示挂载为只读模式问题
- 《算法》第一章部分程序 part 1
- linux开启远程访问端口
- 【BZOJ】【4144】【AMPPZ2014】Petrol
- md5sum命令详解
- 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)
- ACID、数据库隔离级别
热门文章
- POJ 3321 DFS序
- Cesium.js学习第一天(设置材质)
- HDU 2005 第几天?(闰年判断)
- Storm处理流程, 基本参数配置
- JavaScript:直接写入 HTML 输出流
- AngularJS 使用 uppercase 过滤器的表格
- springboot2.04+mybatis-plus+swagger2+CodeGenerator
- IPv4和IPv6的兼容问题
- django-orm简记
- 避免 ‘sudo echo xxxx >;’ 时候 出现 “permission denied”