更改 Javascript 中的关键帧值答案

【问题标题】：Change keyframes values in Javascript更改 Javascript 中的关键帧值
【发布时间】：2022-06-28 12:52:17
【问题描述】：

我有这段 css，但我想用 javascript 中的变量更改关键帧的宽度。我该怎么做？

@keyframes test {
  100% {
    width: 100%;
  }
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

必须是关键帧动画吗？通常，您会为这种由 JavaScript 提供支持的动画使用 CSS transition 属性，如下所示：

var width = 50;

document.getElementById('button').addEventListener('click', () => {
  width += 50;
  document.getElementById('box').style.width = `${width}px`;
});

#box {
  background: red;
  height: 50px;
  width: 50px;
  transition: width .5s;
  margin-bottom: 1em;
}

<div id="box"></div>

<button id="button">Change Width</button>

【讨论】：

感谢您的回答，它运行良好！你是对的，它不一定是关键帧动画。我是一个初学者，这是我知道如何制作动画的唯一方法。再次感谢！

【解决方案2】：

如果你有一个更通用的动画（不能仅仅通过一个过渡来包含），那么你可以使用 JS 来设置一个 CSS 变量。

以问题中的例子为例，将 100% 替换为变量：

@keyframes test {
  100% {
    width: var(--bg);
  }
}

还有 Javascript 你会有类似的东西：

thediv.style.setProperty('--bg', '60px');

【讨论】：

【解决方案3】：

@JohnUleis 已经正确回答了。我来得太晚了。但我只是为了好玩而添加了一个解决方案。被命名为：Rom 是多少？ ;-)

干杯

let root = document.documentElement;
const div = document.querySelector('div');
root.addEventListener("mousemove", e => {
  div.style.setProperty('--width', e.clientX + "px");
  div.innerHTML = e.clientX + ' km';
});

:root {
  --width: 100%; 
}

div {
  background: hotpink;
  width: var(--width);
  text-align: center;
  color: white;
}

&lt;div&gt;how far is rom?&lt;/div&gt;

【讨论】：