如何通过javascript为css代码运行这段代码？
如何通过javascript为css代码运行这段代码？
提问于 2019-03-18 03:01:57
感谢您抽出时间来了解这一点，并感谢您在这方面提供的任何帮助。
我有下面这段代码。
.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传递一个动态值来在rotate中旋转。我该怎么做呢。多步动画可以通过javascript运行吗？
再次感谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-18 03:27:56
在我看来，如果你想控制你的动画而不是仅仅让它动起来，我的建议是你可以使用js来控制你的元素的样式。因为animation是要完成一系列动画的。
还有一个非常强大的css，叫做css variable，你可以在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上查看。在动画中设置步数很容易。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55214216
复制相关文章
相似问题
腾讯云开发者
