我如何通过 javascript 运行为 css 编写代码

Question

感谢您抽出宝贵时间对此进行调查，如有任何帮助，我们将不胜感激。

我有如下一段代码。

.middle_n.expand.remove
{
 animation: contractm 0.3s forwards;
 transform-origin: 0 75px;
 height:200%;
 animation-delay: 1.3s;
}

@keyframes contractm 
{
 0%{}
 100%{transform:translate(147.8%,100%) rotate(-16.75deg);}
}

我希望通过 javascript 传递一个动态值以在 contractm 中旋转。我怎么做。多步动画可以运行通过javascript吗？

再次感谢。

Answer 1

在我看来，如果你想控制你的动画而不是让它动起来，我的建议是你可以使用js来控制你的元素的样式。因为animation是要完成一系列的动画。

还有一个非常强大的css叫做css变量，你可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties.

上了解更多细节

const rotate=document.getElementById("rotate")
let r=0
rotate.addEventListener("click",()=>{
  r += 10
  rotate.style.setProperty("--rotate", r+"deg");
})

#rotate{
  --rotate:0deg;
  background:pink;
  width:100px;
  height:100px;
  transform:rotate(var(--rotate));
  transition:transform 1s;
}

<p>click the square and then it will rotate.</p>
<div id="rotate"></div>

当然，如果你想要系列动画，可以在https://developer.mozilla.org/en-US/docs/Web/CSS/animation上查看。在动画中设置步骤很容易。

我如何通过 javascript 运行为 css 编写代码

How do I run this piece for css code through javascript

javascript

css

jquery

animation

stylesheet

我如何通过 javascript 运行 为 css 编写代码

How do I run this piece for css code through javascript

javascript

css

jquery

animation

stylesheet

我如何通过 javascript 运行为 css 编写代码