Manipulation des animations CSS
Bonjour.
Je débute en Javascript/CSS/PHP et je rencontre des soucis aux niveaux des animations CSS3. :aie:
J'ai créé une fonction qui permet d'affiché un élément en modifiant son display. Mais avant d'afficher l'élément je joue une petite animation de FadeIn pour que l'élément s'affiche progressivement. L'animation est susceptible d'être joué plusieurs fois (sur le même élément) en alternance avec une fonction de FadeOut => display="none".
Ma fonction fonctionne (sauf sur IE) ... MAIS soulève des interrogations (voir à la fin du message) concernant la gestion des animations.
Voici ma fonction Javascript:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| // Affiche l'élément passé en paramètre avec par défaut le display à "block"
function show(ElementID){
var element = document.getElementById(ElementID); // récupère l'élément avec son ID
element.classList.remove("CFadeIn"); //Enlève la classe de FadeIn si l'élément l'avait déjà
element.classList.remove("CFadeOut"); //Enlève la classe de FadeOut si l'élément l'avait déjà
element.classList.add("CFadeIn"); //Ajoute la classe FadeIn à l'élément
element.style.display=DefaultElementDisplay;// On affiche l'élément avant l'animation sinon l'élément est caché durant l'animation et n'apparait qu'à la fin.
//On affiche l'élément A LA FIN de l'animation de FadeIn
element.addEventListener('webkitAnimationEnd', function(EventShowSafariEtChrome) {element.style.display="block";}, false);//"webkitAnimationEnd" => majuscule très importantes
element.addEventListener('animationend', function(EventShowIEetFirefox) {element.style.display="block";}, false);
/* --------- Ceci est le code de ma fonction de FadeOut qui sera joué en alternance avec la fonction ci-dessus -----
// masque l'élément passé en paramètre
function hide(ElementID){
var element = document.getElementById(ElementID);
element.classList.remove("CFadeIn");
element.classList.remove("CFadeOut");
element.classList.add("CFadeOut");
//Quand l'animation de fading est fini on cache l'élément
element.addEventListener('webkitAnimationEnd', function(EventHideSafariEtChrome) {element.style.display ="none";}, false);//"webkitAnimationEnd" => majuscules très importantes
element.addEventListener('animationend', function(EventHideIEetFirefox) {element.style.display="none";}, false);
} */
} |
Voici l'animation en CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| .CFadeIn {
-webkit-animation : FadeIn 0.2s ;
animation : FadeIn 0.2s ;
}
.CFadeOut {
-webkit-animation : FadeOut 0.2s ;
animation : FadeOut 0.2s ;
}
/* ------------------ ANIMATION CSS3 -------------------- */
@-webkit-keyframes FadeIn {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@keyframes FadeIn {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@-webkit-keyframes FadeOut {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 0.0; }
}
@keyframes FadeOut {
0% { opacity: 1.0; }
50% { opacity: 0.5; }
100% { opacity: 0.0; }
} |
Mes interrogations :
-Dans ma fonction il me semblait plus logique de ne pas afficher l'élément avant l'animation et de modifier l'affichage au début de l'animation :
Code:
1
2
3
4
5
| //element.style.display=DefaultElementDisplay; => On supprime cette ligne
//On affiche l'élément AU DEBUT de l'animation de FadeIn
element.addEventListener('webkitAnimationStart', function(EventShowSafariEtChrome) {element.style.display="block";}, false);
element.addEventListener('animationstart', function(EventShowIEetFirefox) {element.style.display="block";}, false); |
Mais ce code ne fonctionne que la première fois que l'animation est joué. Si je re-cache l'élément avec la fonction de FadeOut ... puis le ré-affiche de nouveau avec la FadeIn ... l'animation FadeIn est rejoué à moitié (le display deviens "block" un cours instant), puis l'animation FadeOut est rejoué (:weird: ... je l'appel nul part!! vérifié et revérifié!! sure à 100%) et pour finir l'élément redeviens display="none". Après plus rien ne ce passe sur cet élément. Ça fait exactement la même chose pour les autres éléments.
Pour information j'ai un bouton "afficher" qui appel la fonction "show" sur un <div>. J'ai un autre bouton "cacher" qui appel la fonction "hide" sur le même div.
Est-ce que quelqu'un peut expliquer ce comportement qui me parait bizarre sur le "animationstart". :?
-Après plusieurs essais sur IE11 avec la première fonction que je vous ai donné ... il ce trouve que la div animé par le FadeIn clignote au deuxième lancement (FadeIn => FadeOut => FadeIn => clignote) :aie: ... je n'ai pas encore trouvé de solutions. Des idées?
Merci d'avance.
Si vous avez des questions je suis ouvert.
Et désolé pour les fautes d’orthographes/conjugaison ... je sais que j'en fait énormément malgré mes relectures. :oops:
*** EDIT *** : ajout du résultat des tests sur IE avec la première fonction que j'ai déclaré.
