Why the animate callback function doesn't execute?

user_15036648 0
Viewed 62

I start an animation by calling the animate method. Now I want to display "done" right after that animation completes, but the callback function doesn't execute, and I don't get how I can do so.

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>

callback animation javascript
2 Answers

The 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')
});

Alternatively, you can assign the callback to the onfinish property:

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

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>

user_80463570
Related