Активация анимации Webkit CSS3 с помощью JavaScript

Question

Активация анимации Webkit CSS3 с помощью JavaScript

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

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

10

css css3 webkit css-transitions

задан BoltClock 28 July 2012 в 18:18

1 ответ

Другие вопросы по тегам:

css css3 webkit css-transitions

Похожие вопросы:

score 21 · Accepted Answer

После того, как вы определили переход, он будет применяться независимо от того, как вы измените значения 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;");
}

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