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

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线程中同时设置动画的起始状态和动画的结束状态，这样在设置动画的起始状态后页面不会重新渲染。也就不能形成动画了