javascript - 如何在 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）

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";
    }         
}

提前感谢您的帮助。

抱歉，如果我的问题微不足道，我只是找不到任何文档

标签： javascriptjquery-animate

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";
}