probleme lier au display none et bloque pour les animation

Israël
Les bases HTML/CSS
Javascript

Lorsque je travaille avec CSS et HTML et JS, lorsque un élément est en display: none, et que je le mets en display: block, les animations ne se déclenchent pas. Comment résoudre ce problème ?

6 réponses

JRcode
Réponse acceptée

Tu veux dire les animations d'apparition de l'élément ? Ce comportement est du au fait que l'élément n'est plus dans le DOM avec display:none et donc il réapparaît brutalement..

C'est pas forcément l'idéal mais tu peux privilégier des méthodes qui le laissent dans le DOM mais de manière invisible (visibility, opacity..)

Sinon il y a des librairies qui peuvent gérer les animations à l'apparition depuis un display:none

Alainpre
Réponse acceptée

Tu veux parler des transitions je supose.

AubinJ

Des recommandations de bibliothèques pour gérer ça proprement ? Je débute un peu là-dessus

Alainpre

Si c'est juste pour faire une animation ou un transition, les bibliothèques ne vont pas t'aider beaucoup.
Apprends plutôt las animatin CSS ou les transitions, c'est facile. Il y a un tutoriel sur les animations ici

juan.3594

Bonjour Alainpre

Suite à ta réponse, peut-on utiliser Keyframes pour par exemple faire animer des pions de Dominos? L'année dernière j'ai voulu faire un jeu de domino avec 4 joueurs. J'avais pris des pions en format png (ou svg je ne sais plus) mais je n'ai jamais réussi sur les animations pour les mélanger, les déplacer etc?

Alainpre

oui bien sûr.
Si c'est des images, tu peux modifier les marges par exemples.