javascript - 翻译后将 html 元素返回到其原始位置

Question

我在用着

document.getElementById('Droping1').style['-webkit-transform'] = translate(0px,'+Ground+'px)';

移动一个 html 对象。

我应该如何将它送回原来的地方重复使用。我不希望用户看到翻译回来。

我的解决方案是：

document.getElementById(event.data.name).style['-webkit-transition'] = '0s';    
document.getElementById(event.data.name).style['-webkit-transform'] = 'translate(0px)';

有更好的解决方案吗？

谢谢

Answer 1

首先将当前style['-webkit-transform']值保存在临时变量中，然后在翻译后将其分配回style['-webkit-transform']如下：

var temp = document.getElementById('Droping1').style['-webkit-transform'];
document.getElementById('Droping1').style['-webkit-transform'] = translate(0px,'+Ground+'px)';

后：

document.getElementById('Droping1').style['-webkit-transform'] = temp;

为了不向客户显示到原始位置的翻译，您应该将-webkit-transition-duration属性设置为0sbeforedocument.getElementById('Droping1').style['-webkit-transform'] = temp;以便在眨眼间发生，就像您-webkit-transform使用 JS 更改属性的方式一样。