如何在Javascript animate API（动画）和下面的代码之间添加一个时间间隔

Question

#Javascript的官方动画引擎

我知道这听起来很蠢，但我找不到任何关于动画 API 的文档（youtube 上没有，google 上没有，堆栈溢出上没有），所以这里是相关代码

if(secondary[0].style.display == "inline-block"){
    for(let i=0;i<secondary.length;i++){
        secondary[i].animate([
            {transform:"scale(1)",offset:0},
            {transform:"scale(0.7)",offset:0.3},
            {transform:"scale(0.3)",offset:0.7},
            {transform:"scale(0)",offset:1}
        ],{
            origin:'top',
            duration:2000,
            easing:"ease-in-out",
            fill:"forwards"
        })
    };
}

我的问题是，如果我添加额外的代码，动画不会发生，因为额外的代码会立即执行，正如我提到的，我找不到关于动画的任何信息 API，所以我想知道如何让我的动画先完成，然后再执行其余代码。（如果您想知道我只想在动画后显示 div none）

if(secondary[0].style.display == "inline-block"){
    for(let i=0;i<secondary.length;i++){
        secondary[i].animate([
            {transform:"scale(1)",offset:0},
            {transform:"scale(0.7)",offset:0.3},
            {transform:"scale(0.3)",offset:0.7},
            {transform:"scale(0)",offset:1}
        ],{
            origin:'top',
            duration:2000,
            easing:"ease-in-out",
            fill:"forwards"
        })
    };
    for(let i=0;i<secondary.length;i++){    //this code doesn't allow the animation to finish
         secondary[i].style.display = "none";
    }         
}

在此先感谢您的帮助。

抱歉，如果我的问题很简单，我就是找不到任何文档

Answer 1

JavaScript 有 onFinish 处理程序。请尝试此代码段。

var anim = secondary[i].animate([
                    {transform:"scale(1)",offset:0},
                    {transform:"scale(0.7)",offset:0.3},
                    {transform:"scale(0.3)",offset:0.7},
                    {transform:"scale(0)",offset:1}
                ],{
                    origin:'top',
                    duration:2000,
                    easing:"ease-in-out",
                    fill:"forwards"
                });
anim.onfinish = function() {
  secondary[i].style.display = "none";
}

如何在Javascript animate API（动画）和下面的代码之间添加一个时间间隔

How to add a time interval between Javascript animate API(the animation) and the following code

javascript

jquery-animate