javascript - JavaScript:在1秒内逐步将CSS属性的值增加100

我有一个属性为transform: translateX(0);的元素，通过JavaScript单击时，translateX()的值增加或减少了100。如何使值增加/减少100的过程逐渐发生，从而使该元素看起来好像在缓慢移动？

这是我当前立即更改它的方式：

val = val - 100;
var attplus = "translateX(+" + val + "%)";
scene[0].style.webkitTransform = attplus;

有问题的元素是scene[0]，该值在attplus变量中生成。

最佳答案

只需为transition添加两个样式属性，延迟为1s，例如：

var attplus = "translateX(+" + val + "%)";
scene[0].style.webkitTransform = attplus;
scene[0].style.WebkitTransition = "all 1s";
scene[0].style.transition = "all 1s";

关于javascript - JavaScript:在1秒内逐步将CSS属性的值增加100，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48041181/