javascript - 用 JavaScript 即时结束 CSS 动画

Question

我有一个分配了 CSS 动画的输入框，所以当页面加载时，它有一个漂亮的淡入动画。

CSS:

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

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

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

我试过弄乱 animation-play-state 并尝试用 !important 覆盖不透明度，但没有成功。

Javascript:

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

HTML:

<input id="search-box">

Answer 1

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

let stop = function() {
  let elem = document.getElementById('search-box');
  elem.classList.remove('animate');
}

#search-box {}

.animate {
  animation: 5s fade-in;
}

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

<input id="search-box" class="animate">
<button onclick='stop()'>stop!</button>

或者简单地取消设置动画属性:

let stop = function() {
  let elem = document.getElementById('search-box');
  elem.style.animation='unset';
}

#search-box {
  animation: 5s fade-in;
}

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

<input id="search-box" class="animate">
<button onclick='stop()'>stop!</button>