css - 使用 Javascript 激活 Webkit CSS3 动画

Question

当按下按钮时，我希望使用 Webkit CSS3 将绝对定位的 DIV 从屏幕上的一个位置移动到另一个位置，方法是更改​​其左右 CSS 属性。但是，我看到的所有执行此操作的示例都使用静态 CSS 规则来应用此转换。

我事先不知道新的位置，那么如何动态应用这个 CSS3 过渡呢？

Answer 1

一旦定义了过渡，无论您如何更改元素上的 CSS 值，它都会应用。因此，您只需使用 JavaScript 应用内联样式，元素就会生成动画。所以使用这样的CSS：

left: 100px;
top: 100px;
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;

有这样的功能：

function clickme() {
    var el = document.getElementById('mydiv');
    var left =  300;
    var top =  200;
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;");
}

当您调用该函数时，您将看到动画。您可以从任何您喜欢的地方获取 left 和 top 的值。 我已经做了一个完整的例子。

Answer 2

另一种选择是使用jQuery Transit将绝对定位的 div 向左或向右移动：

Javascript：

$("#btnMoveRight").click( function () {
    $('#element').transition({ left: '+=50px' });
});

$("#btnMoveLeft").click( function () {
    $('#element').transition({ left: '-=50px' });
});

JS 小提琴演示

它在移动设备上运行良好，并为您处理您的 CSS3/浏览器兼容性。