使用JavaScript立即结束CSS动画

我有一个指定了CSS动画的输入框，所以当页面加载时，它有一个很好的淡入动画

CSS:

#search-box {
    /* ... */
    animation: 2s fade-in
}

@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}

let endAnimation = // ... boolean
if (endAnimation) {
    let elem = document.getElementById('search-box');
    // End the animation and set opacity to 1 somehow...
}

<input id="search-box">

在某些情况下，当加载页面时（当URL参数存在时），我希望输入框的CSS动画停止并立即将不透明度设置为

1

我尝试过在

动画播放状态下乱搞，并试图用
覆盖不透明度！重要信息
，但我们运气不好

Javascript:

#search-box {
    /* ... */
    animation: 2s fade-in
}

@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}

let endAnimation = // ... boolean
if (endAnimation) {
    let elem = document.getElementById('search-box');
    // End the animation and set opacity to 1 somehow...
}

<input id="search-box">

HTML:

#search-box {
    /* ... */
    animation: 2s fade-in
}

@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}

let endAnimation = // ... boolean
if (endAnimation) {
    let elem = document.getElementById('search-box');
    // End the animation and set opacity to 1 somehow...
}

<input id="search-box">

您可以在单独的类中制作动画，只需删除该类即可停止动画：


let stop=function（）{
让elem=document.getElementById（'search-box'）；
elem.classList.remove（'animate'）；
}
#搜索框{}
.制作动画{
动画：5s淡入；
}
@关键帧淡入{
从{
不透明度：0
}
到{
不透明度：1
}
}

住手@i还添加了第二个方法；）