-webkit translateX animação é rolamento de volta para a posição inicial

Question

Eu estou tentando fazer uma galeria de imagens para webkit móvel,

A única maneira é realmente rápido o suficiente é usando o hardware acelerado translateX.

O meu problema é que a div ter de volta a sua posição inicial no final da animação. Eu adiciono o cliking classe slideGalLeft no botão esquerdo. a animada div

Você pode ver um exemplo aqui, na seção de eventos de retorno de chamada: 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

Não use animação webkit para este como ele vem de volta para os valores padrão jogou uma vez. Em vez disso definir

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

e usando Javascript, seja -webkit-transform: translateX(100%); conjunto ou adicionar uma classe CSS para o elemento que definir o valor final transformar e webkit vai animá-lo corretamente

Answer 2

A resposta de Guillaume é grande. No entanto, se você está procurando a aceleração de hardware, você deve deixar o motor webkit sei que você quer de renderização 3D (o que torna a aceleração de hardware ativo).

De acordo com a http://www.html5rocks.com/tutorials / velocidade / html5 / # toc-hardware-Accell , isso é feito através da adição de translateZ (0) à sua regra, assim:

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

Siga o conselho de Guillaume além disso.

Answer 3

Use:

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

Isso permite que você defina o que acabam de sua animação os restos elemento quando a animação é acabado.

Answer 4

Eu era capaz de fazê-lo funcionar, adicionando um "display: none" estilo no acabamento da animação. Use o seguinte CSS:

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

.hiddendiv {
    display:none;
}

Em seguida, em seu código jQuery:

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

deve funcionar!