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

Я хочу использовать Webkit CSS3 для перемещения абсолютно позиционированного DIV из одного места в другое на экране при нажатии кнопки, изменив его свойства влево и вправо CSS. Тем не менее, все примеры для этого, которые я видел, используют статическое правило CSS для применения этого перехода.

Я не знаю новую позицию перед рукой, так как я могу применить этот переход CSS3 динамически?

Ответы

Ответ 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;");
}

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

Ответ 2

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

JavaScript:

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

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

JS Fiddle Demo

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