如何在javascript中为元素编写动画样式

Question

这里，animation: slideUp 0.7s  ease-in-out;0.7s 是动态的，需要从 javascript 计算和添加。如何在javascript中编写以下样式/ css：-$(".narra").css("animation", "slideUp "+ i * 0.1+"s  ease-in-out");.css.narra{ /* animation: slideUp 0.7s  ease-in-out; */}@keyframes slideUp{  from {    transform: translateY(100%);    opacity: 0;  }  to {    transform: translateY(0%);    opacity: 1;  }}

Answer 1

一旦由服务器发送，您将无法轻松修改 CSS。但是，您可以使用 jQuery 或 Javascript 来修改所需对象的动画持续时间属性。

还有其他动画组件，您可以将 CSS 分解成更容易或更易读的基类，然后使用 Javascript 设置持续时间

.narra {

    animation-name: 'slideUp',

    animation-timing-function: ease-in-out

}

 var calc = i * 0.1 // your math here;

 $(".narra").css("animation-duration", calc + "s");