激活使用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;");
}

你会看到动画，当你调用该函数。你可以从任何你喜欢的左侧和顶部的值。 我已经做了充分的示例。

Answer 2

另一种选择是使用 jQuery的交通以移动所述绝对定位的div向左或向右：

<强>使用Javascript：

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

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

的 JS小提琴演示

它的工作原理以及在移动设备和处理您的CSS3 /浏览器兼容性你。