使用Javascript激活Webkit CSS3动画

Question

我希望使用Webkit CSS3来移动绝对定位的DIV，当按下按钮时，通过改变其左右CSS属性将其从屏幕上一个位置移动到另一个位置。然而，我看到的所有做法都使用静态CSS规则来应用此过渡效果。

由于我事先不知道新位置，所以我该如何动态应用这个CSS3过渡效果？

- jeffreyveon

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的值。 我已经提供了一个完整的示例。

- robertc

---

不错的完整答案和演示！对于探索CSS3动画的人来说是很好的资源。 - Todd

谢谢@Todd - 我会尽力让我的回答有价值 :) - robertc

用关联动画切换类不是更容易吗？ - Valerij

@Vprimachenko 在这种情况下，您需要为左和上可能的每个组合创建一个类，然后根据输入的值选择正确的类。因此，没有... - robertc

哦，我明白了，我误解了要求，感谢澄清。 - Valerij

Answer 2

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

Javascript：

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

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

JS Fiddle演示

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

- Gaff