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

Question

我有一个属性为 transform: translateX(0); 的元素，通过 JavaScript 点击时 translateX() 值增加或减少 100。我怎样才能使这个值增加/减少 100 逐渐发生，所以看起来元素正在缓慢移动？

这就是我目前立即更改它的方式:

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

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

Answer 1

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

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