网页动画API回调函数

Question

我刚刚发现 Web Animations API，我正在尝试弄清楚如何为这些动画引入回调函数。我试过使用以下方法

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

查看 this section 上的 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
};

网页动画API回调函数

Web animations API callback function

javascript

animation

web-animations