11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Des animations qui ne marchent qu'une fois....

Bonjour à tous...
Je suis débutant et je m’entraine sur les CSS (et HTML) depuis un mois. Les script... je ne viens que de les "effleurer".
Je finalise mon site. Il s'agit d'un portfolio, et je voudrais profiter des animations et transitions pour faire rentrer et sortir des DIV's dans ma page principale grâce au changement de leur position. J'ai fait des essais, les animations sont jolies et marchent, mais s'agissant de les déclencher par un menu (avec des Href) j'ai été obligé de passer par un petit script. J'ai pensé changer leur class pour que le css puisse ensuite les animer... Genre class 'on' sur celle à faire rentrer et 'off' pour sortir la vieille.
Mais problème : le script marche, les changements de position sont visibles, mais les animation ne sont jouées qu'une fois, après la première, tout changement se fait d'un coup, et sans effet animé...
C'est probablement du à un principe... qui m'échappe ! Et malgré toutes mes lecture sur cet excellent site, je n'arrive pas à cerner le problème...
Il y aurait-il une âme gentille qui puisse m'éclairer, en sachant que mes compétences de script sont très basiques, malgré un peu de connaissance de VBA ?
Merci d'avance à vous tous....

Le script très simple que j'ai utilisé :




var old_choix = 'accueil'; // Mon menu principale
var new_choix = null;

function choix(new_choix) {

	if (new_choix === old_choix)
	return ;
	
	document.getElementById(old_choix).className = 'off';
	document.getElementById(new_choix).className = 'on';
	
	old_choix = new_choix;
	  
	}

Modifié par qubik (03 Jun 2014 - 12:50)
Modérateur
Bonjour,

Essaie de réinitialiser la classe de l'élément concerné à "off" avec un setTimout juste après avoir affecté sa classe à "on". Voici un exemple :


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
@keyframes scrollBalloon
{
	from {transform:translateY(0);}
	20% {transform:translateY(0);}
	to {transform:translateY(-115%);}
}
.on {animation:scrollBalloon 1s linear;}
.off {animation:0;}
</style>
</head>
<body>
<div id="cible">
Maman, je n'ai rien aux dents !<br>
</div>
<button type="button" onclick="jouer()">Jouer l'animation</button>
<script>
function initialiser()
{
	var e=document.getElementById("cible");
	e.className="off";
}
function jouer()
{
	var e=document.getElementById("cible");
	e.className="on";
	setTimeout("initialiser()",1100);
}
</script>
</body>
</html>


EDIT (du 05/06/2014): remplacement de ".of {animation:0;}" par ".off {animation:0;}" (mais ça n'empêchait pas le script de fonctionner).
Modifié par parsimonhi (05 Jun 2014 - 14:37)
@parsimonhi...

Merci pour ta réponse et excuse moi pour la mienne... tardive, mais je suis terriblement occupé et je m'occupe de la création de mon site quand j'ai un peu de temps libre...

Je te tiendrais au courant, et merci d'avance...
Bon... à la fin j'ai trouvé une solution.
En effet, apparemment, il n'est pas possible de rejouer une animation (ou transition) seulement en lui changeant la class avec un script, il faut aussi intervenir au niveau script en lui indiquant de la rejouer.

Du coup, j'ai préféré faire cette opération directement dans les CSS en déclarant deux animations différentes, une pour l'aller de ma DIV, une pour le retour. Après il suffit de les associer aux class 'on' et 'off' pour que les deux soient jouées correctement.

Ce n'est pas follement élégant... Mais ça marche nickel.

En tout cas mille merci.
Sujet clos
Aller à