Bonjour,

Après des jours de recherches, je décide de poster enfin un message ici.

Je fais actuellement un site dans lequel on me demande pas mal d'animations, et je voudrais pouvoir lancer ces animations les unes après les autres au clic.

Je m'explique :

On va imaginer que mon site comporte 3 animations chacune composées de 3 cercles qui se déplacent.

Lors du premier clic sur le bouton, la première animations se lance et mes trois premiers cercles partent les un après les autres.

Lors du second clic, c'est ma deuxième animation qui se lance et trois autres cercles se mettent à bouger.

Lors du troisième clic, la troisième animation se lance et les trois derniers cercles bougent.

Et, dans l'idéal, un quatrième clic remettrait toutes les animations à leurs emplacements d'origine.

Enfin voilà, je sais faire des animations en css, j'ai réussis déjà à faire en sorte qu'elle se déclenche au clic, mais impossible de trouver quoique ce soit pour déclencher plusieurs animations qui ne partiraient pas en même temps. Je suppose qu'il faudrait du javascript pour faire ça (ou du jquery, mais je comprends très mal le jquery)... Enfin si c'est possible.

Sauriez-vous m'aiguiller ? 

Merci

Salut, 

ouai j'ai une petite idée mais je ne sais si elle va marcher : 

on va en effet utiliser jquery pour compter le nombre de clique et modifier la classe de tes cercles à animer

var nb=0;
$('#button').click(function(){
   nb++;
   if(nb==1){
     $('.cercle1').attr('class', 'animated1');
   }
   if(nb==2)(
     $('.cercle2').attr('class', 'animated2');
   }
   if(nb==3)(
     $('.cercle3').attr('class', 'animated3');
   }
}

et donc les animateds ce sont tes css (si ça marche pas j'ai une autre technique). Pour le reset j'ai une idée mais faut que je teste un peu plus

Bonjour,

Bon, moi je vais te présenter un truc balèze. Il faudras que tu maîtrise je js (en tout cas que tu sache te démerder avec). GSAP (https://greensock.com/gsap) est un très bon outil pour faire des animations. Il peut tout faire, par exemple créé une timeline qui seras composée de 3 animations. Cette timeline peut se déclencher au clic de la souris, et se mettre en pause à la fin d'une animation, ou repartir de 0 à la fin de la dernière animation.

Ca te demanderas du travail, mais à l'heure actuelle difficile de trouver mieux pour faire des animations en js

Salut,

Pour compléter la solution de @PheniXosBurn, tu peux utiliser le modulo (%) pour gérer la réinitialisation des animations.

var nb=0;
$('#button').click(function(){
   nb++;
   if(nb % 4 == 1){
     $('.cercle1').attr('class', 'animated1');
   }
   if(nb % 4 == 2){
     $('.cercle2').attr('class', 'animated2');
   }
   if(nb % 4 == 3)(
     $('.cercle3').attr('class', 'animated3');
   }
   if(nb % 4 == 0){
     $('.cercles').attr('class', 'reset');
   }
}

-
Edité par NicoDemo16 6 juillet 2018 à 14:18:15

Je ne sais pas si ma réponse ne s'affiche juste plus chez moi ou si elle a totalement disparue, donc je vais la réécrire.

Merci beaucoup pour vos réponses. 

PheniXosBurn, ta solution fonctionne très bien si ce n'est un petit problème de parenthèses vite corrigé. J'ai également trouvé une solution pour relancer l'animation au quatrième clic, je ne sais pas si c'est très propre comme code mais ça fonctionne :

var nb=0;
$('#button').click(function(){
   nb++;
   if(nb==1){
     $('.cercle1').attr('class', 'animated1');
   }
   if(nb==2){
     $('.cercle2').attr('class', 'animated2');
   }
   if(nb==3){
     $('.cercle3').attr('class', 'animated3');
   }
   if(nb==4){
     $('.cercle1').removeAttr('class', 'animated1');
     $('.cercle2').removeAttr('class', 'animated2');
     $('.cercle3').removeAttr('class', 'animated3');
     nb=0;
   }
})

piero5673, je manque malheureusement un peu de temps pour me pencher sur cette solution dans l'immédiat, d'autant que j'en ai une autre qui fonctionne déjà du coup, mais je garde cet outil en mémoire pour un projet perso, merci beaucoup

var nombre = 0;
$('#button').on('click', ()=> {
	nombre++;
	if(nombre%4<1) {
		for(let index=1;index<4;index++) {
			$(`.cercle${index}`).removeAttr('class', `animated${index}`);
		}
    } else {
		let index = nombre%4;
		$(`.cercle${index}`).attr('class', `animated${index}`);
    }
});