Активация анимации 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;");
}

И вы увидите анимацию при вызове функции.Вы можете получить значения для левого и верхнего отовсюду. Я сделал полный пример .

Answer 2

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

Javascript:

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

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

JS Fiddle Demo

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