javascript - CSS3 - 分步在屏幕上翻译元素?

标签 javascript html css webkit css-animations

我需要以 50 像素为单位在屏幕上平移一个元素。假设每次点击,元素都会向右移动 50 像素。

如何更正以下代码?

http://jsfiddle.net/vujMV/13/

这里每次跳转50px,然后平移50px,每次点击总共100px。我需要对运动进行硬件加速(因为它要部署在移动平台上),因此我需要使用 translate()。

最佳答案

只需注释掉最后两行。这些是导致初始 50px 跳跃的原因:

//left += 50;
//move.style.left = left+"px";

编辑
要使其在您每次单击时都能正常工作,您需要更改相对于当前属性的 translate3d 属性,而不是 .offset 属性,因为一旦您注释掉上述行,该属性就不再更改。

这是一个工作示例:http://jsfiddle.net/vujMV/16/

关于javascript - CSS3 - 分步在屏幕上翻译元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8869392/

相关文章:

javascript - 如何从 Controller 呈现两种类型的数据以在 node.js 中查看?

css - 如何在 twitter bootstrap 中对流动行进行填充

html - "text-decoration: none"不工作,即使是 "!important"

javascript - 为什么这段代码不能专注于所需的 div?

CSS3 Flexbox 全高应用和溢出

javascript - 表单未提交或按钮提交不起作用

javascript - ECMAScript(ECMA-262 5.1)中的 `base value` 的 `reference` 是什么?

javascript - 如何获取数组中的对象以显示在文档或控制台上

javascript - div 相对于静态元素的绝对位置

javascript - 当 native 键盘在移动设备上可见时禁用滚动