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

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

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


css css-transitions webkit
person jeffreyveon    schedule 13.06.2010    source источник

Ответы (2)


arrow_upward
21
arrow_downward

Как только вы определили переход, он будет применяться независимо от того, как вы меняете значения 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 откуда угодно. Я сделал полный пример.

person robertc    schedule 26.06.2010
comment
Хороший полный ответ и демонстрация! Отличный ресурс для исследователей анимации CSS3. - person Todd; 23.09.2010
comment
Спасибо @Todd - я стараюсь, чтобы мои ответы были полезными :) - person robertc; 23.09.2010
comment
не проще ли переключить класс с соответствующей анимацией? - person Valerij; 30.01.2011
comment
@Vprimachenko В этом случае вам нужно будет создать класс для каждой из возможных комбинаций левого и верхнего, а затем выбрать правильный в зависимости от введенных значений, поэтому нет - person robertc; 30.01.2011
comment
о, я вижу, я неправильно понял требования, спасибо за разъяснение - person Valerij; 20.02.2011

arrow_upward
0
arrow_downward

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

JavaScript:

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

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

Демонстрация JS Fiddle

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

person Gaff    schedule 21.03.2013