animation Webkit translateX roule en position initiale

Je suis en train de faire une galerie d'images pour WebKit mobile,animation Webkit translateX roule en position initiale

La seule façon dont il est en fait assez vite utilise le translateX de l'accélération matérielle.

Mon problème est que la div reprend sa position initiale à la fin de l'animation. J'ajoute le cliquetis de la classe slideGalLeft sur le bouton gauche. à la div animée

Vous pouvez voir un exemple ici, dans la section des événements de rappel: 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%); } 
}

Source

2010-01-07 Cedric Dugas

Ne pas utiliser l'animation webkit pour qu'il en revient aux valeurs par défaut une fois joué. définir lieu

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

et en utilisant Javascript, soit définir -webkit-transform: translateX(100%); ou ajouter une classe CSS à votre élément qui définit la valeur de transformation finale et WebKit va animer correctement

Source

2010-05-31 23:23:10

thx! c'est ce que je cherchais –

vous pouvez utiliser le mode fill-animation pour garder l'animation à la dernière position (bien que vous deviez vraiment utiliser la transition pour un changement d'étape permanent) –

Vous avez certainement raison sur la propriété fill-mode. Je ne le savais pas au moment de ma réponse. –

j'ai pu le faire fonctionner en ajoutant un style "display: none" à la fin de l'animation. Utilisez le CSS suivant:

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

.hiddendiv { 
    display:none; 
}

Puis dans votre code jQuery:

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

devrait fonctionner!

Source

2011-03-08 23:28:40

La réponse de Guillaume est géniale. Cependant, si vous recherchez une accélération matérielle, vous devez indiquer au moteur Webkit que vous voulez un rendu 3D (ce qui rend l'accélération matérielle active).

Selon http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell, cela se fait en ajoutant translateZ (0) à votre règle, comme ceci:

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

Suivez les conseils de Guillaume au-delà.

Source

2011-05-29 06:21:50

Utilisation:

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

Cela vous permet de définir à quelle fin de votre animation reste l'élément lorsque l'animation est terminée.

Source

2012-03-26 09:42:02 hallodom

animation Webkit translateX roule en position initiale

Répondre

Questions connexes