javascript - 如何根据 javascript 值使动画持续时间动态化

Question

我目前在 css 中有这段代码，它从一种颜色转换为另一种颜色，但我想根据 javascript 中的某些值使持续时间动态变化，而不是让它成为固定值。

我必须采取哪些解决方案才能实现它？这是我当前转换它的 CSS

ul li.transform a { 
  color: red;
  -webkit-animation-name: transform;
  -webkit-animation-duration: 60s;
  -webkit-animation-fill-mode: forwards;
  animation-name: transform;
  animation-duration: 60s;
  animation-fill-mode: forwards; 
}

@-webkit-keyframes transform{
  from { color: red; }
  to { color: green; }
}

@keyframes transform {
  from { color: red; }
  to { color: green; }
}

<ul>
  <li class="transform">
    <a href="#">link</a>
  </li>
</ul>

Answer 1

您还可以使用 animationDuration 属性来定义动画持续时间。

(function() {
  let time = "3s",
      set_duration = () => {
        document.getElementById("link").style.WebkitAnimationDuration = time;
        document.getElementById("link").style.animationDuration = time;
      };
    
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
      set_duration();
  } else {
      document.addEventListener('DOMContentLoaded', set_duration);
  }
})();

ul li.transform a { 
    color: red;
    -webkit-animation-name: transform;
    -webkit-animation-fill-mode: forwards;
    animation-name: transform;
    animation-fill-mode: forwards; 
}

@-webkit-keyframes transform {
    from { color: red; }
    to { color: green; }
}

@keyframes transform {
    from { color: red; }
    to { color: green; }
}

<ul>
    <li class="transform">
        <a href="#" id="link">link</a>
    </li>
</ul>