#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";
}
}
预先感谢您的帮助。
很抱歉,如果我的问题很简单,我只是找不到任何文档
答案 0 :(得分:0)
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'
}