11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Controler des animations CSS3 en JS

Bonjour,
J'ai un petit problème, je n'arrive pas à contrôler des animations CSS3 via Javascript

Voila mon bout de code qui devrait faire que le bloc bouge de 50px en 10sec : 
document.getElementById('divexpli').style.TransitionDuration="10s";
		document.getElementById('divexpli').style.Transform=' translate(50px, 55px)';

Mon code actuellement fait que la div se deplace d'un coup.

J'ai essayé différentes choses tel que les préfixes, différentes syntaxes, mais rien ne marche, j'ai du passer à coté de quelque chose.

Si quelqu'un a une solution, je suis preneur Smiley lol

Merci
salut,
c'est parce que tu ne spécifies pas la propriété à animer. De plus il faut préfixer à chaque fois pour les anciennes versions et au passage, c'est "transitionDuration" et non "TransitionDuration" et c'est pareil pour "transform".

var div = document.getElementById("divexpli");

div.style.MozTransition = "-moz-transform 10s";
div.style.WebkitTransition = "-webkit-transform 10s";
div.style.oTransition = "-o-transform 10s";
div.style.transition = "transform 10s";

div.style.MozTransform = "translate(50px, 55px)";
div.style.WebkitTransform = "translate(50px, 55px)";
div.style.oTransform = "translate(50px, 55px)";
div.style.transform = "translate(50px, 55px)";


Le mieux encore serait de laisser ce genre de choses en CSS et d'ajouter simplement une classe à ton élément via JS pour que ça prenne effet:

#divexpli {-moz-transition:transform 10s;-webkit-transition:transform 10s;-o-transition:transform 10s;transition:transform 10s;}
#divexpli.anime {-moz-transform:translate(50px, 55px);-webkit-transform:translate(50px, 55px);-o-transform:translate(50px, 55px);transform:translate(50px, 55px);}



document.getElementById("divexpli").className = "anime";
Modérateur
Attention avec les propriété à animer dans les transitions:

div.style.WebkitTransition = "-webkit-transform 10s";
div.style.transition = "transform 10s";

Le problème étant que pour chrome (de la version 26 à actuelle (31)) on aura:

div.style.transition = "-webkit-transform 10s";

Vu que transition n'est plus préfixée mais transform toujours.

Pour pallier à cela deux solutions:

1) Utiliser 'all': div.style.transition = all 10s";
2) Faire de la détection de fonctionnalité pour savoir quelle est la propriété exacte à utiliser. Pour cela, de l'aide peut être apportée par des scripts existants, comme par exemple Modernizr.
Merci de m'aider Smiley lol

Même avec les transition en CSS ca ne marche pas. Mais du coup j'ai continuer d'essayer avec du CSS, et j'ai utiliser animation

		#divexpli.anime 
		{
		display:block;
		-webkit-animation-name: poupi;
		-webkit-animation-duration: 4s;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-timing-function: linear;
		animation-name: poupi;
		animation-duration: 4s;
		animation-iteration-count: 1;
		animation-timing-function: linear;
		}
			@-webkit-keyframes poupi {
  		from {
			
  		  -webkit-transform: translateX(0px);
 		 }
 		 to { 
 		   -webkit-transform: translateX(100px);
		    -webkit-animation-play-state:paused;

 		 }
	}


Cela marche bien excepter que l'animation revient a sa forme initiale. les animation-play-state ne marchent pas :s
Une solution?


Merci encore Smiley lol
J'ai essayer avec ce site, mais je n'arrivais pas à faire ce que je voulais (oui je suis pas doué ><)
Mais j'ai reussi avec les animations (avec les %)

Donc merci à vous Smiley lol
Sujet clos
Aller à