如何在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");