内容loading加载后高度变化CSS3 transition体验优化-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

内容loading加载后高度变化CSS3 transition体验优化

2016-06-17 14:45:34 2196 1

面是张大神张鑫旭的文章.提出个问题.

<!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)
  • 杨冬芳
    2019-07-17 19:42:43

    一方面,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,这才会产生过渡效果。

    0 0
相关问答

1

回答

CSS3中transition和animation的属性

2020-12-23 17:28:04 704浏览量 回答数 1

1

回答

css 子元素transition动画为什么无效?

2016-06-07 17:54:33 2602浏览量 回答数 1

2

回答

请问css3的transition属性可否被子元素继承?

2016-06-02 11:09:02 1704浏览量 回答数 2

1

回答

css3 transition 动画状态切换

2016-05-31 15:54:30 1780浏览量 回答数 1

1

回答

css 子元素transition动画为什么无效?

2016-05-30 11:35:01 5623浏览量 回答数 1

1

回答

请问css3的transition属性可否被子元素继承?

2016-05-27 11:17:38 2060浏览量 回答数 1

1

回答

如何去除CSS3中transition对字体的影响

2016-03-25 09:52:16 2206浏览量 回答数 1

1

回答

请问静态文件CSS和JS,在SERVERLESS DEVOPS 发布后加载不了怎么处理?PYTHON

2022-08-22 12:43:44 247浏览量 回答数 1

26

回答

我存放在OSS里面的js文件和css文件访问的时候都乱码了,请问怎么回事呀

2022-03-02 17:45:44 30763浏览量 回答数 26

1

回答

JSP页面好像引入不了js,css文件,需要设置什么吗?:报错

2020-06-14 11:04:14 547浏览量 回答数 1
+关注
杨冬芳
IT从业
文章
问答
问答排行榜
最热
最新
相关电子书
更多
UI2CODE智能生成flutter代码--整体架构 【上叶】
立即下载
渐进式动画解决方案
立即下载
渐进式动画解决方案
立即下载