為什么我這里的輪播動畫，如果用同步寫法沒有動畫效果，只有用異步寫法才有？

//組合繼承  部分代碼
    //構(gòu)造函數(shù) 傳入一個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都為負(fù)值，
            //且style.left獲取的是字符串，需要用parseInt()取整轉(zhuǎn)化為數(shù)字。
            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') 無效，沒有動畫，刷新直接跳轉(zhuǎn)
    
    


為什么會出現(xiàn)這種情況
animate函數(shù)執(zhí)行完，瀏覽器渲染的時候list的left,transition我認(rèn)為應(yīng)該是都設(shè)置上去了的呀？