问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

下面两个代码为什么执行结果不一样

头像
明月醉清风
    928

    代码如下

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
        .move {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .start {
            transform: translateX(0);
        }
        .move-active {
            transition: transform 3s ease;
        }
        .end {
            transform: translateX(100px);
        }
    </style>
</head>
<body>
    <div class="move" style="display: none;"></div>
</body>
<script>
    // 1
    // var div = document.querySelector('.move');
    // div.classList.add('start');
    // div.classList.add('move-active');
    // requestAnimationFrame(() => {
    //     div.classList.remove('start');
    //     div.classList.add('end');
    // });
    // div.style.display = 'block';

    // 2
    setTimeout(() => {
        var div = document.querySelector('.move');
        div.classList.add('start');
        div.classList.add('move-active');
        requestAnimationFrame(() => {
            div.classList.remove('start');
            div.classList.add('end');
        });
        div.style.display = 'block';
    }, 0);
</script>
</html>

    结果

    1. 第一部分代码，会有动画效果
    2. 第二部分代码，大概率没有动画效果

    疑问

    为什么同样的代码加了setTimeout之后会有不同的效果，setTimeout不是把整个代码块放到事件循环线程中么，然后在加入js引擎线程中执行么，按道理来说，这两个代码并不会导致不一样的结果啊?

    javascripthtml5
    阅读 1.6k
    2 个回答
    得票最新
    头像
    青青子矜
      57416

      经测试，效果是一样的。你把延时时间调成1000毫秒看。
      0秒没有效果应该是浏览器没反应过来吧

      头像
      婉婉
        29415

        嗯..这个和requestAnimationFrame这个方法有关系，这方法又一个特性 -- "在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流。" 代码稍微调整下就可以了。

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
        .move {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .start {
            transform: translateX(0);
        }
        .move-active {
            transition: transform 3s ease;
        }
        .end {
            transform: translateX(100px);
        }
    </style>
</head>
<body>
<div class="move"></div>
</body>
<script>
    // 1
    // var div = document.querySelector('.move');
    // div.classList.add('start');
    // div.classList.add('move-active');
    // requestAnimationFrame(() => {
    //     div.classList.remove('start');
    //     div.classList.add('end');
    // });

    // 2
    setTimeout(() => {
        var div = document.querySelector('.move');
        div.classList.add('start');
        div.classList.add('move-active');
        requestAnimationFrame(() => {
            div.classList.remove('start');
            div.classList.add('end');
        });
    }, 0);


</script>
</html>

        如果你想加display样式，那你可以把requestAnimationFrame换成setTimeOut方法，就可以了

            setTimeout(() => {
        var div = document.querySelector('.move');
        div.classList.add('start');
        div.classList.add('move-active');
        setTimeout(() => {
            div.classList.remove('start');
            div.classList.add('end');
        },0)
        div.style.display = 'block';
    }, 0);
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题