内容loading加载后高度变化CSS3 transition体验优化
面是张大神张鑫旭的文章.提出个问题.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style type="text/css">
*{margin:0;padding:0;box-sizing:border-box;}
.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; overflow: hidden; }
.loading { height: 100%; background: url(ajax-loader.gif) no-repeat center; }
.in { width: 100px; margin: 0 auto; border: 50px solid #beceeb; background-color: #f0f3f9; }
[type=button] { width: 100px; height: 32px; font-size: 100%; }
</style>
</head>
<body>
<div id="box" class="box">...</div>
<p>
<input type="button" id="button" value="点击我">
</p>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var funTransitionHeight = function(element, time) { // time, 数值，可缺省
if (typeof window.getComputedStyle == "undefined") return;
var height = window.getComputedStyle(element).height;
element.style.height = "auto";
var targetHeight = window.getComputedStyle(element).height;
element.style.height = height;
setTimeout(function() {
if (time) element.style.transition = "height "+ time +"ms";
element.style.height = targetHeight;
}, 15);
};
(function() {
// demo演示脚本
var box = document.getElementById("box"), button = document.getElementById("button");
button.onclick = function() {
// 载入菊花，模拟loading效果
box.innerHTML = '<div class="loading"></div>';
// 随机高度内容
setTimeout(function() {
box.innerHTML = '<div class="in" style="height:'+ Math.round(400 * Math.random()) +'px;"></div>';
funTransitionHeight(box, 250);
}, 1000);
};
// 初始高度
funTransitionHeight(box);
})();
</script>
</body>
</html>代码中这一段。
setTimeout(function() {
if (time) element.style.transition = "height "+ time +"ms";
element.style.height = targetHeight;
}, 15);为什么要setimeout. 去掉就没效果了.. 张大神解释说是需要
触发动画效果需要触发重绘，setTimeout就有这个作用
小弟依然没太明白. 求解释......
展开
收起
1
条回答
写回答
写回答
-
IT从业一方面，CSS样式修改是渲染中的一种高成本操作，所以浏览器一般会缓存渲染树的更新。但有的情况则不会缓存，比如：
1.调整窗口大小和修改页面默认字体
2.client/offset/scroll（比如访问 node.clientWidth 属性）
3.getComputedStyle() currentStyle
另一方面，setTimeout 是要等执行线程空闲的时候才会触发的。
以上是原理。下面看问题：
假设没有 setTimeout，效果成了：
// 立即重排 var height = window.getComputedStyle(element).height; // 缓存之 element.style.height = "auto"; // 立即重排 var targetHeight = window.getComputedStyle(element).height; // 下面开始重点： // 缓存之 element.style.height = height; // 缓存之 if (time) element.style.transition = "height "+ time +"ms"; // 缓存之 element.style.height = targetHeight; // 渲染结果就是，根本不会渲染高度为 height，而是直接渲染成 targetHeight。我们想要的结果是从 height 到 targetHeight 的过渡。
那有了 setTimeout，效果就是酱紫的了：
// 缓存之 element.style.height = height; // 空闲了才干 setTimeout(function() { if (time) element.style.transition = "height "+ time +"ms"; element.style.height = targetHeight; }, 15); // 立即重排喏喏，浏览器得先重排高度为 height 才闲下来，而一闲下来才要求重排到 targetHeight，这才会产生过渡效果。
2019-07-17 19:42:43赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
