Question

是否可以通过名称获取动画样式规则？

我有这个动画：

undefined

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

@keyframes fadein {

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

}

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

如果我想更改动画持续时间而又不知道在哪里使用动画，该怎么办？

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>

如何按名称获取动画

1 个答案: