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

//组合继承 部分代码

 //构造函数 传入一个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') 无效,必须放计时器里才用动画
为什么会出现这种情况
animate函数执行完,浏览器渲染的时候list的left,transition我认为应该是都设置上去了的呀?

2个回答

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

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

qflyalltime
小羊也疯狂 我懂你意思了,你就是说只要在同步js代码中没有在动画开始结束之间设置reflow,动画就不会生效,因为后面的会覆盖前面的
一年多之前 回复

this.list.style.transition = left ${animateDuration} linear;//看这里!
var newLeft = parseInt(this.list.style.left) + offset;

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!