如何在后面的代码中获取 CSS class 属性

Question

我有一个 css 值需要从后台代码中调用。有人可以帮我吗？

.shape.bar.progress { 位置：绝对}

.形状.pro { 动画：左 4s}

@还剩关键帧 {100%{ 变换：旋转（180 度）；}}

我可以调用 .shape.pro shape1.attributes.add(“class”, “亲”)

现在，我想调用@keyframes 以便我可以在后面的代码中更改旋转值。该怎么做？

谢谢

Answer 1

您不应该访问@keyframe 属性。

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

刚刚:

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

然后为了过渡效果，将此添加到您的 .shape class :

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

Answer 2

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

所以在你的 CSS 你写：

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

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

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

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

How to get a CSS class property in code behind