javascript - 网页动画 API 回调函数

Question

我刚刚发现了Web Animations API，我试图弄清楚如何为这些动画引入回调函数..我尝试使用以下

$('.box_wrapper')[0].animate([
    { right: '-100%' },
    { right: 0 }
], {
    fill: 'forwards',
    duration: 1000,
    onfinish: function() {
        // do stuff
    }
});

查看本节的 w3c 规范，我认为该onfinish属性是我需要使用的，但没有任何反应。

我也尝试过使用 jQuery 回调语法；

$('.box_wrapper')[0].animate([
    { right: '-100%' },
    { right: 0 },
], {
    fill: 'forwards',
    duration: 1000
}, function() {
    // do stuff
});

但这当然也行不通。任何想法，我相信这很简单，我只是还没有找到信息。

Answer 1

我几乎做对了，只要稍微调整一下，回调就可以工作了；

$('.box_wrapper')[0].animate([
    { right: '-100%' },
    { right: 0 }
], {
    fill: 'forwards',
    duration: 1000
}).onfinish = function() {
    // do stuff
};