我有一个属性为 transform: translateX(0);
的元素,通过 JavaScript 点击时 translateX()
值增加或减少 100。我怎样才能使这个值增加/减少 100 逐渐发生,所以看起来元素正在缓慢移动?
这就是我目前立即更改它的方式:
val = val - 100;
var attplus = "translateX(+" + val + "%)";
scene[0].style.webkitTransform = attplus;
有问题的元素是 scene[0]
,值在 attplus 变量中生成。
最佳答案
只需为 transition 添加两个样式属性延迟 1 秒,例如:
var attplus = "translateX(+" + val + "%)";
scene[0].style.webkitTransform = attplus;
scene[0].style.WebkitTransition = "all 1s";
scene[0].style.transition = "all 1s";
关于JavaScript:在 1 秒内逐渐将 CSS 属性的值增加 100,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48041181/