Анимация webkit translateX возвращается в исходное положение

Я пытаюсь сделать галерею изображений для мобильного webkit,

Единственный способ, на самом деле достаточно быстрый, - использовать аппаратное ускорение translateX.

Моя проблема в том, что div возвращает свое начальное положение в конце анимации. Я добавляю класс slideGalLeft cliking на левую кнопку.

Здесь вы можете увидеть пример в разделе событий обратного вызова: http://position-absolute.com/jqtouch/demos/main/#home

    .slideGalLeft {
    -webkit-animation-name: slideColis;
}


@-webkit-keyframes slideColis {
    from { -webkit-transform: translateX(0%); }
    to { -webkit-transform: translateX(-100%); }
}

Ответ 1

Не используйте для этого анимацию webkit, поскольку она возвращается к значениям по умолчанию, когда они были воспроизведены. Вместо этого определите

.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%);
}

и используя Javascript, либо установите -webkit-transform: translateX(100%);, либо добавьте класс CSS к вашему элементу, который установит окончательное значение преобразования, и webkit будет анимировать его правильно

Ответ 2

Ответ Гийома велик. Однако, если вы ищете аппаратное ускорение, вы должны позволить движку webkit знать, что вы хотите 3D-рендеринг (что делает аппаратное ускорение активным).

Согласно http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell, это делается добавлением translateZ (0) к вашему правилу, например:

.slideGalleft{
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateX(0%) translateZ(0);
}

Следуйте советам Гийома помимо этого.

Ответ 3

Использование:

-webkit-animation-fill-mode: none/backwards/forwards/both;

Это позволяет определить, на каком конце анимации элемент остается, когда анимация закончена.

Ответ 4

Мне удалось заставить его работать, добавив стиль "display: none" на финише анимации. Используйте следующий CSS:

.paused {
    -webkit-animation-play-state: paused;
}

.hiddendiv {
    display:none;
}

Затем в вашем коде jQuery:

$('div.sideimage').click(
    function () {
        $(this).removeClass("paused").delay(2000).queue(
            function(next) {     
                $(this).addClass("hiddendiv");     
                next();
            }
        ); 
    }
);

Должен работать!