这里的同步函数为什么没有效果，必须要加个计时器才行？

Question

//组合继承 部分代码 //构造函数 传入一个id 生成一个轮播图对象     function Slider (id) {         this.create(id)     };     //定义原型     Slider.prototype = {         create: function (id) {                         this.list = document.getElementById('list');                         ...                         ...                         ...             //初始化实例中的dom以及属性     **初始状态没有transition**         },         animate: function (offset,animateDuration) {             //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，             //且style.left获取的是字符串，需要用parseInt()取整转化为数字。             this.list.style.transition = `left ${animateDuration} linear`;//看这里！             var newLeft = parseInt(this.list.style.left) + offset;             this.list.style.left = newLeft + 'px';  //看这里！         },     };     var slider = new Slider('container');     /*setTimeout(function () {         slider.animate(-300,'1s')     },0)  只有异步才有效，刷新有动画 */     slider.animate(-300,'1s')   //无效，没有动画，刷新直接跳转遇到这么一个问题， slider.animate(-300,'1s') 无效，必须放计时器里才用动画为什么会出现这种情况

Answer 1

一个动画要有起始状态和结束状态，这样就必须经过两次页面渲染才能确定两个状态、
我在你上一问题中说了：一个js代码的线程执行结束页面才会重新渲染。
就是说，在js线程执行前是动画的起始状态，在js线程执行后是动画的结束状态。

如果你在一个js线程中同时设置动画的起始状态和动画的结束状态，这样在设置动画的起始状态后页面不会重新渲染。也就不能形成动画了