动画有时不执行，为什么加定时器就不会了？不太理解

setTimeout(() => {

const info = this._queue.shift();

this.el.style.transition = `all ${ info.time / 1000 }s`;

this.el.style.transform = this._getTransform(info);

}, 0);

源自：ES6 class 6-2 封装形变类（2）

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2020-04-06 10:23:25

同学你好，问题解答如下：

1、定时器如果不添加时间，就会立即执行，虽然是异步执行，但是前面的样式改变完之后就会立即执行定时器中的，时间较短看不到大小的改变。可以添加上时间看看效果，例如

2、过渡效果需要具体情况具体分析，同步代码一般执行完一个之后就会执行下一个。

自己再测试下，祝学习愉快！

好帮手慕慕子 2020-03-31 14:03:34

同学你好，因为一般情况下，不加定时器，js代码从上到下执行的过程中，将元素的一个属性值改变到另一个值是瞬间的，不会有过渡的效果。但是添加了定时器之后，由于定时器是异步的，会等到同步代码执行完成后才执行，这样就相当于有了一个过渡时间让元素的属性值从一个改变到另一个值，实现动画效果。

同学可以试着理解下，如果还有疑惑，可以将你写的代码直接粘贴过来，便于针对同学的代码测试，帮助同学更准确的解答问题。

祝学习愉快~

提问者慕尼黑5122342 #1

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ width:100px; height:100px; background:red; transition:all 1s; /*display:none;*/ } </style> </head> <body> <div id="div"></div> <button id="button">按钮</button> <script type="text/javascript"> let div=document.getElementById('div'); let button=document.getElementById('button'); button.onclick=function (){ div.style.transform = 'scale(0, 0) translate(0%, 100%)'; // div.style.display='none'; div.style.background='yellow'; setTimeout(function (){ div.style.transform = 'scale(1, 1) translate(0, 0)'; // div.style.display='block'; // div.style.transform = 'scale(0.1, 0.1) translate(0%, 100%)'; div.style.background='blue'; }); }; </script> </body> </html> 老师，为什么元素不是先瞬间消失，然后再慢慢显示出来？

2020-04-04 19:38:16
提问者慕尼黑5122342 #2

还有一个问题，如果不加定时器，会出现有时候有过渡动画，有时候没有过渡动画，是不是因为浏览器执行同步代码的时候有快有慢造成的？

2020-04-04 21:04:19