使用Javascript激活Webkit CSS3动画

Question

我希望通过更改其左右CSS属性,使用Webkit CSS3在按下按钮时将绝对定位的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;");
}

当您调用该函数时,您将看到动画.您可以从任何地方获取左侧和顶部的值. 我做了一个完整的例子.