程序运行中动态修改animation属性无效？

2024-02-14 00:34:45

为什么在程序运行中动态修改 animation 属性无效？这是因为，根据 CSS 规范，一旦动画开始播放，就不允许通过样式表或 JavaScript 动态修改动画属性。这是为了防止动画在播放过程中发生突变或中断，从而确保动画的平滑和一致性。

在CSS中, animation timing function 和 animation keyframes 是不可控属性, 这意味着运行时动态修改这两个属性不会生效。

对于想要在程序运行时修改动画行为的开发者，可以使用以下方法：

使用 CSS 类和 setAttribute 方法：
- 为不同的动画行为创建多个 CSS 类，每个类包含不同的动画属性。
- 使用 setAttribute 方法在 HTML 元素上切换这些 CSS 类，以实现动态修改动画行为的目的。
使用 CSS 变量：
- 使用 CSS 变量存储动画属性值，例如动画持续时间、延迟时间和动画曲线。
- 通过 JavaScript 修改这些 CSS 变量的值，就可以动态调整动画行为。

在本文中，我们将重点介绍第一种方法，即使用 CSS 类和 setAttribute 方法来实现动态修改动画行为。下面是一个示例代码：

<div id="animation-container">
  <div class="animation-element"></div>
</div>

/* 定义不同的动画类 */
.animation-1 {
  animation: animation-1 2s infinite;
}

.animation-2 {
  animation: animation-2 2s infinite;
}

/* 定义动画关键帧 */
@keyframes animation-1 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(200px);
  }
}

@keyframes animation-2 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(200px);
  }
}

// 获取动画元素
const animationElement = document.getElementById('animation-container');

// 创建一个按钮来切换动画行为
const button = document.createElement('button');
button.textContent = '切换动画';
button.addEventListener('click', () => {
  // 切换动画类
  animationElement.classList.toggle('animation-1');
  animationElement.classList.toggle('animation-2');
});

// 将按钮添加到页面
document.body.appendChild(button);