如何在代码隐藏中获取CSS类属性

Question

我有一个css值，需要从代码后面调用。有人能帮我吗？

.形状.条形图.进度｛position:absolute｝

.shape.pro｛动画：左4s｝

@左侧关键帧｛100%｛变换：旋转(180度(；｝｝

我可以通过调用.shape.proshape1.attributes.add("class"、"pro"(

现在，我想调用@keyframe，这样我就可以在后面的代码中更改旋转值。。怎么做？

感谢

Answer 1

是的，如果使用CSS变量而不是特定值，则可以从Javascript更改关键帧中的某些内容。

所以在你的CSS中你写：

@keyframes left {100%{ transform: rotate(var(--degrees));}}

在您的Javascript中，您可以将变量设置为您想要的值：例如：

element.style.setProperty('--degrees', n + 'deg');

其中element是具有该动画的元素，n是度数。

Answer 2

您不应该访问@keyframe属性。

如果您只想将角度从0更改为180，您甚至不需要关键帧。

只是：

.shape .pro { 
transform: rotate(180deg)
}

然后为了获得过渡效果，将其添加到.shape类中：

.shape {
transform: rotate(0);
transition: transform 4s
}