Активация анимации Webkit CSS3 с использованием Javascript

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;"); 
} 

И вы увидите анимацию при вызове функции. Вы можете получить значения слева и сверху, где бы вы ни находились. I've done a full example.

Answer 2

Другим вариантом было бы использовать jQuery Transit для перемещения с абсолютным позиционированием DIV влево или вправо:

Javascript:

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

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

JS Fiddle Demo

Он хорошо работает на мобильных устройствах и распоряжается вашими Совместимость CSS3/браузера для вас.