为什么我这里的轮播动画，如果用同步写法没有动画效果，只有用异步写法才有？

Question

//组合继承  部分代码
    //构造函数 传入一个id 生成一个轮播图对象
    function Slider (id) {
        this.create(id)
    };
    //定义原型
    Slider.prototype = {
        create: function (id) {
            this.container = document.getElementById(id);
            this.list = document.getElementById('list');
            this.buttons = document.getElementById('buttons').getElementsByTagName('span');
            this.prev = document.getElementById('prev');
            this.next = document.getElementById('next');
            this.index = 1;   //控制圆点
            this.swapPageTime = 2000
            this.timer=null;
        },
        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') 无效，没有动画，刷新直接跳转
    
    


为什么会出现这种情况
animate函数执行完，浏览器渲染的时候list的left,transition我认为应该是都设置上去了的呀？

Answer 1

同步js代码,设置动画起始和结束之间的代码如果不能引起浏览器reflow，动画后面的设置将会覆盖前面的设置，动画不会发生
解决方法1.settimeout ==>异步导致重排
解决方法2. var slider = new Slider('container');
slider.list.offsetWidth ==>人为同步重排
slider.animate(-300,'1s')