为什么动画回调函数不执行？

Question

我通过调用 animate 方法启动动画。现在我想在动画完成后立即显示“完成”，但回调函数没有执行，我不知道该怎么做。

document.addEventListener('DOMContentLoaded', function (event) {
    let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
    class Image {
        sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
        constructor(_src) {
            this.src = _src;
            this.width = `${window.getComputedStyle(sliderWrapper).width}`;
            this.move();
        }
    }
    Image.prototype.move = function () {
        let img = document.createElement('img');
        img.setAttribute("src", this.src);
        img.setAttribute("width", this.width);
        img.classList.add('img');
        sliderWrapper.appendChild(img);
        img.animate({
            left: 0
        }, 1000, function () {
            console.log('done')
        });
    }
    let img = new Image('https://via.placeholder.com/150');
});

*{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.slider-wrapper{
    position: relative;
    max-width: 60%;
    height: 350px;
    margin: 70px auto;
    border: 1px solid #000;
}
.img{
    position: absolute;
    left: 100%;
    top: 0;
}

<div class="slider-wrapper">
</div>

Answer 1

animate method does not take a third argument. To provide a callback for when the animation finishes, get the promise object for it: finished:

img.animate({ left: 0 }, 1000).finished.then(function () {
    console.log('done')
});

或者，您可以将回调分配给 onfinish 属性:

img.animate({ left: 0 }, 1000).onfinish = function () {
    console.log('done')
};

Answer 2

document.addEventListener('DOMContentLoaded', function (event) {
    let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
    class Image {
        sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
        constructor(_src) {
            this.src = _src;
            this.width = `${window.getComputedStyle(sliderWrapper).width}`;
            this.move()
        }
    }
    Image.prototype.move = function () { console.log("Entry")
        let img = document.createElement('img');
        img.setAttribute("src", this.src);
        img.setAttribute("width", this.width);
        img.classList.add('img');
        sliderWrapper.appendChild(img);
        var n = img.animate({
                left: 0
            }, 1000).finished.then(function () {
console.log('finished')
});
       
    }
    let img = new Image('https://via.placeholder.com/150')
});

*{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .slider-wrapper{
            position: relative;
            max-width: 60%;
            height: 350px;
            margin: 70px auto;
            border: 1px solid #000;
        }
        .img{
            position: absolute;
            left: 100%;
            top: 0;
        }

<div class="slider-wrapper">
</div>

为什么动画回调函数不执行？

Why the animate callback function doesn't execute?

javascript

animation

callback