JQuery - изменение анимации CSS на лету происходит только тогда, когда я выхожу из окна браузера и возвращаюсь

Я работал над этим весь день в рамках гораздо более крупного собственного проекта и столкнулся с небольшой проблемой: http://jsfiddle.net/GYv22/2/

Я пытаюсь изменить скорость мяча на лету, используя кнопки быстрее/медленнее. Это использовалось для удаления текущего стиля анимации CSS (со старой скоростью), однако я обнаружил, что он работает, как и ожидалось, без этого, и теперь просто добавляет новый стиль (с новой скоростью), анимация использует ключевые кадры с использованием свойства translate3d . Не уверен, что это лучший способ сделать это, но я подумал, что это лучше подходит, чем использование классов, поскольку я постоянно динамически изменяю скорость анимации.

function animate(x, y) {
        $('#xSpeed').html(x);
        $('#ySpeed').html(y);

        var horizontalCSS = 'updown ' + y + 's infinite linear';
        var ballCSS = 'leftright ' + x + 's infinite linear';

        $('#horizontal')
            .css('-webkit-animation', horizontalCSS) /* Chrome */
            .css('-moz-animation', horizontalCSS) /* Firefox */
            .css('animation', horizontalCSS); /* IE */

        $('#ball')
            .css('-webkit-animation', ballCSS)
            .css('-moz-animation', ballCSS)
            .css('animation', ballCSS);
    }

Это работает, как и ожидалось в Firefox (хотя и немного нервно, но изменения скорости происходят в режиме реального времени, т.е. когда вы нажимаете кнопки, мяч становится быстрее/медленнее!), в Chrome мне нужно покинуть вкладку и вернуться, чтобы увидеть изменение скорости ( ???), а в IE 10 анимация шарика работает, но изменения скорости нет вообще, даже при выходе/возврате на вкладку или в реальном времени.

Я думаю, проблема в том, что стиль анимации добавляется к #horizontal, и я также хочу, чтобы он влиял на его дочерний элемент, #ball. Это необходимо для будущих изменений стиля, которые я добавляю, так как я хочу, чтобы другие элементы двигались вместе с мячом с той же скоростью, и все они двигались в пределах «горизонтально». Однако кажется, что свойство дочернего элемента не обновляется, например. пока я не покину вкладку и не вернусь. В Chrome, если я использую «Проверить элемент» для непосредственного осмотра мяча, контур div, который появляется при наведении курсора на код для #ball, перемещается независимо от мяча на экране!

Любые идеи? Я новичок в использовании jQuery, и это действительно расстраивает: >

РЕДАКТИРОВАТЬ: я думаю, что это проблема с translate3d и Chrome, которые по умолчанию не используют графический процессор, установленный в about:flags. Я проверю и опубликую обновление.

EDIT: обновление: http://jsfiddle.net/GYv22/3/

Похоже, он работает с использованием -webkit в Chrome с translate, а не с translate3d. Это позор и похоже на довольно хакерский метод, поскольку в руководстве, которому я следовал, рекомендуется translate3d для мощности графического процессора.

 @-webkit-keyframes leftright {
    0%, 100% {
        -webkit-transform: translate(0px, 0);

    }
    50% {
        -webkit-transform: translate(545px, 0);
    }
}
@-webkit-keyframes updown {
    0%, 50%, 100% {
        -webkit-transform: translate(0, 0);
    }
    25% {
        -webkit-transform: translate(0, 150px);
    }
    75% {
        -webkit-transform: translate(0, -135px);
    }
}

Я попытался включить настройки графического процессора в Chrome по адресу about:flags, но это также не решило мою проблему. По крайней мере, это кажется временным обходным путем. Я также нашел решение о добавлении/удалении анимации из дочерних элементов прямо здесь, на всякий случай, если это пригодится кому-то еще: webkit translate3d вызывает проблемы (Peek-Thru), но я не знаю, как реализовать это для моей повторяющейся анимации.


animation jquery css transform translate3d
person Vixxd    schedule 18.05.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Для Chrome попробуйте установить новую скорость с помощью паузы и повторно запустить ее после установки новой скорости.

  $('#horizontal')
        .css('-webkit-animation', horizontalCSS) /* Chrome */
        .css('-moz-animation', horizontalCSS) /* Firefox */
        .css('animation', horizontalCSS); /* IE */

  $('#ball')
        .css('-webkit-animation', ballCSS)
        .css('-moz-animation', ballCSS)
        .css('animation', ballCSS);

  $('#horizontal,#ball').css('-webkit-animation-play-state', 'paused');
  $('#horizontal,#ball').css('-webkit-animation-play-state', 'running');
person Hereblur    schedule 10.07.2013