-
月亮以西2020-01-01 00:00
- 10
- 36
- 0
代码如下
<!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>结果
- 第一部分代码，会有动画效果
- 第二部分代码，大概率没有动画效果
疑问
为什么同样的代码加了setTimeout之后会有不同的效果，setTimeout不是把整个代码块放到事件循环线程中么，然后在加入js引擎线程中执行么，按道理来说，这两个代码并不会导致不一样的结果啊
0
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 10 元积分
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部