javascript - 如何通过名称获取动画

Question

有没有办法通过名称获取动画样式规则？

我有这个动画:

@keyframes fadein {

    0% {
        opacity: 1;
    }
    37.5% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    87.5% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }

}

我在多个地方都这样使用它:

#MyElement {
    animation: fadein 5s linear 0s infinite;
    pointer-events: none;
}

我想使用 JavaScript 将动画持续时间从 5 秒动态更改为 1 秒。

如果我想在不知道在哪里使用它的情况下更改动画持续时间，我该怎么做？

Answer 1

您可以像这样更改animation-duration:
myElement.style['animation-duration'] = value;

const myAnimatedElements = document.querySelectorAll(`.anim`)

const mySelect = document.querySelector(`select`)

mySelect.addEventListener(`change`, handleSelectChange)

function handleSelectChange(event) {
  const value = event.target.value
  myAnimatedElements.forEach(el => el.style[`animation-duration`] = value)
}

@keyframes fadein {
  0% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  87.5% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.anim {
  animation: fadein 5s linear 0s infinite;
  pointer-events: none;
}

<select>
  <option value="5s">5s</option>
  <option value="4s">4s</option>
  <option value="3s">3s</option>
  <option value="2s">2s</option>
  <option value="1s">1s</option>
  <option value="0.5s">0.5s</option>
</select>

<div class="anim">Animated</div>
<div class="anim">Animated</div>
<div class="anim">Animated</div>
<div class="anim">Animated</div>
<div class="anim">Animated</div>
<div class="anim">Animated</div>