gpt4 book ai didi

javascript - 我如何通过 javascript 为 css 代码运行这篇文章

转载 作者:太空宇宙 更新时间:2023-11-04 06:24:17 24 4
gpt4 key购买 nike

感谢您抽出时间对此进行调查,我们将不胜感激。

我有以下一段代码。

.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运行吗?

再次感谢。

最佳答案

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

还有一个非常强大的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 - 我如何通过 javascript 为 css 代码运行这篇文章,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55214216/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com