【发布时间】：2020-10-06 02:59:17
【问题描述】：
我正在尝试使用 javascript 来更改关键帧动画的开始和结束度值。
在我的 CSS 文件的 :root 中，我为六个 div 中的每一个创建一个开始和结束变量，并分配一个初始值“0deg”。然后在我的 javascript 文件中，我每 3 秒更新一次每个变量。理论上这应该意味着每个 div 随机旋转 90 度。
但是，事实并非如此，我碰壁了。有趣的是，当我使用 getComputedStyle 将 CSS 旋转变量的值打印到控制台时，它们正确地反映了 javascript 创建的值。您可以在这里看到控制台正在记录与我的“rotate0a”和“rotate0b”公式相匹配的各种数字——左上角 div 的开始值和结束值。然而，该 div 会根据我在 :root 中设置的变量不断旋转。
CSS 转换不尊重新的变量值。任何帮助将不胜感激。谢谢！
下面的代码和这里的 CodePen 版本：https://codepen.io/KylePalermo/pen/rNeENwd
let min = 0;
let max = 4;
let x;
let rotVar;
let rotVarStarts = [0, 0, 0, 0, 0, 0];
let rotVarEnds = [];
function getRandomInt() {
min = Math.ceil(min);
max = Math.floor(max);
x = Math.floor(Math.random() * (max - min) + min);
}
function resetStarts() {
for (let i = 0; i < 6; i++) {
rotVarStarts[i] = rotVarEnds[i];
}
}
function setEnds(){
for (let i = 0; i < 6; i++) {
getRandomInt();
if (x == 0) {
rotVar = 0; } else if
(x == 1) {
rotVar = 90; } else if
(x == 2) {
rotVar = 180; } else if
(x == 3) {
rotVar = 270; } else if
(x == 4) {
rotVar = 360; }
rotVarEnds[i] = rotVar;
}
document.documentElement.style.setProperty('--rotate0a', rotVarStarts[0] + "deg");
document.documentElement.style.setProperty('--rotate0b', rotVarEnds[0] + "deg");
document.documentElement.style.setProperty('--rotate1a', rotVarStarts[1] +"deg");
document.documentElement.style.setProperty('--rotate1b', rotVarEnds[1] + "deg");
document.documentElement.style.setProperty('--rotate2a', rotVarStarts[2] + "deg");
document.documentElement.style.setProperty('--rotate2b', rotVarEnds[2] + "deg");
document.documentElement.style.setProperty('--rotate3a', rotVarStarts[3] + "deg");
document.documentElement.style.setProperty('--rotate3b', rotVarEnds[3] + "deg");
document.documentElement.style.setProperty('--rotate4a', rotVarStarts[4] + "deg");
document.documentElement.style.setProperty('--rotate4b', rotVarEnds[4] + "deg");
document.documentElement.style.setProperty('--rotate5a', rotVarStarts[5] + "deg");
document.documentElement.style.setProperty('--rotate5b', rotVarEnds[5] + "deg");
let test1 = getComputedStyle(document.documentElement).getPropertyValue('--rotate0a');
let test2 = getComputedStyle(document.documentElement).getPropertyValue('--rotate0b');
console.log(test1 + "//" + test2);
}
setInterval(function () {
setEnds();
resetStarts();
}, 3000);:root {
--rotate0a: 0deg;
--rotate0b: 90deg;
--rotate1a: 0deg;
--rotate1b: 0deg;
--rotate2a: 0deg;
--rotate2b: 0deg;
--rotate3a: 0deg;
--rotate3b: 0deg;
--rotate4a: 0deg;
--rotate4b: 0deg;
--rotate5a: 0deg;
--rotate5b: 0deg;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.rotater {
width: 100%;
background-color: blue;
padding-bottom: 100%;
position: relative;
}
.zero {
animation: rotation0 1s infinite linear;
}
.one {
animation: rotation1 1s infinite linear;
}
.two {
animation: rotation2 1s infinite linear;
}
.three {
animation: rotation3 1s infinite linear;
}
.four {
animation: rotation4 1s infinite linear;
}
.five {
animation: rotation5 1s infinite linear;
}
.inner {
position: absolute;
top: 0;
left: 0;
}
@keyframes rotation0 {
from {
transform: rotate(var(--rotate0a));
}
to {
transform: rotate(var(--rotate0b));
}
}
@keyframes rotation1 {
from {
transform: rotate(var(--rotate1a));
}
to {
transform: rotate(var(--rotate1b));
}
}
@keyframes rotation2 {
from {
transform: rotate(var(--rotate2a));
}
to {
transform: rotate(var(--rotate2b));
}
}
@keyframes rotation3 {
from {
transform: rotate(var(--rotate3a));
}
to {
transform: rotate(var(--rotate3b));
}
}
@keyframes rotation4 {
from {
transform: rotate(var(--rotate4a));
}
to {
transform: rotate(var(--rotate4b));
}
}
@keyframes rotation5 {
from {
transform: rotate(var(--rotate5a));
}
to {
transform: rotate(var(--rotate5b));
}
}<body onload = "setEnds()">
<div class = "wrapper">
<div class = "rotater zero">
<div class = "inner"></div>
</div>
<div class = "rotater one">
<div class = "inner"></div>
</div>
<div class = "rotater two">
<div class = "inner"></div>
</div>
<div class = "rotater three">
<div class = "inner"></div>
</div>
<div class = "rotater four">
<div class = "inner"></div>
</div>
<div class = "rotater five">
<div class = "inner"></div>
</div>
</div>
</body>【问题讨论】：
标签： javascript css animation css-animations