2 réponses à ce sujet

[Cocojump]

Bonjour,

J'ai utilisé des animations css pour rendre mon interface plus dynamique. Entre autre, j'ai utilisé les "keyframes". Par contre, je voudrais savoir si il est possible de lancer une animation css après un mouseUp sans Javascript. Car quand j'utilise la pseudo classe "active", mon animation se lance seulement quand je garde la pression du click (plutôt logique jusque là). Le truc c'est que cette animation doit se jouer juste avant le chargement d'une autre page. Je voudrais donc savoir si cela est possible uniquement en css, même si j'ai peu d'espoir

Merci d'avance

[Cocojump]

Finalement je suis passé par le javascript avec une fonction qui va chercher mon animation pour qu'elle s'applique au mouseUp, puis j'ai créer une fonction qui va chercher ma page html. Je l'ai ensuite ralentie avec "setTimeout" pour laisser le temps à l'animation css de se jouer.

Voila ce que donne le JS :

<a id="bt" class="menu-stats stats-anim">&nbsp;</a>
		 <script>
	//Ici ma fonction qui lance mon animation css après le click
	$(function animation() {
	 $("#bt").click(function () {
	 $(".menu-stats").toggleClass("stats-trans");
	 //le toggleClass qui va ajouter la class "stats-trans" à la class "menu-stats"
	 //je précise que c'est la class "stats-trans" que j'ai animée
  
	//Ma fonction qui va chercher ma page "stats.html"
	function retarder() {
	  alert("ok");
	  $(window).attr('location', 'stats.html');
	 }
	
	//Ici je retarde la redirection vers "stats.html" pour laisser le temps à l'animation de se jouer
	var dmc_setTimeout = setTimeout(retarder, 400);
	 });
	});
   </script>

Mon animation css :

CSS

/*Ici ma class qui définit l'animation*/

.stats-trans {

-moz-animation: stats-trans-anim 400ms ease;

}

/*Et ici les images clefs pour l'animation*/

@-moz-keyframes stats-trans-anim {

0% {

  transform: scale(1.0);

  opacity: 1.0;

}

50% {

  transform: scale(0.7);

  opacity: 0.7;

}

100% {

  transform: scale(1.0);

  opacity: 1.0;

}

}

[dcz.switcher]

Merci d'avoir pris le temps de poster la solution que tu as mis en oeuvre.

Sinon, pour le JS, je pense que tu peux simplifier avec quelque chose dans le genre, mais c'est du détail.

<script>
(function () {
    $('#bt').on('click', function () {
            $(e.target).toggleClass("stats-trans");
            window.setTimeout(function () {
                    document.location.href = 'stats.html';
            }, 400);

    });
}());
</script>