Forums Développement Multimédia

Aller au contenu

Animation css [mouseUp]

css3 CODE animation

2 réponses à ce sujet

#1 Cocojump

    Ceinture Blanche

  • Members
  • Pip
  • 3 messages

Posté 02 April 2015 - 09:01 AM

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 :cool:

#2 Cocojump

    Ceinture Blanche

  • Members
  • Pip
  • 3 messages

Posté 02 April 2015 - 17:26 PM

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;
}
}


#3 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2530 messages

Posté 02 April 2015 - 20:26 PM

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>
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site



2 utilisateur(s) li(sen)t ce sujet

0 membre(s), 2 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP