анимация webkit translateX откатывается в исходное положение

Question

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

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

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

Вы можете увидеть пример здесь, в разделе событий обратного вызова: 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%); }
}

Answer 1

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

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

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

Answer 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);
}

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

Answer 3

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

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

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

Answer 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();
            }
        ); 
    }
);

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