Question

#Javascript的官方动画引擎

我知道这听起来有些愚蠢，但我找不到任何有关animate 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的任何信息，所以我想知道如何制作动画首先完成，然后执行其余代码。（以防万一，我只是想在动画之后不显示divs）

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处理程序。请尝试使用此代码段。

{
  date: 'Tue, 11 Aug 2020 17:52:59',
  server: 'Apache',
  'cache-control': 'private, max-age=0',
  'content-type': 'application/json; charset=utf-8',
  'x-aspnet-version': '4.0.30319',
  'x-powered-by': 'ASP.NET',
  'content-length': '85',
  'set-cookie': [
    'ASP.NET_SessionId=12tz7bfonzkqaywiepwynvm3; path=/; HttpOnly; SameSite=Lax'
  ],
  vary: 'Accept-Encoding',
  connection: 'close'
}

如何在Java动画API（动画）和以下代码之间添加时间间隔

1 个答案: