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.

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

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

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?

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