css - 使用 Javascript 激活 Webkit CSS3 动画

Question

我希望使用 Webkit CSS3 通过更改左右 CSS 属性，在按下按钮时将绝对定位的 DIV 从屏幕上的一个位置移动到另一个位置。但是，我看到的所有这样做的示例都使用静态 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 的值。 I've done a full example .