javascript - Puis-je désactiver temporairement toutes les transitions/animations CSS3 pendant qu'un élément est construit ?

J'ai créé un menu plutôt complexe pour un site web. Le menu repose sur une grande quantité d'animations basées sur CSS3. Cependant, lorsque je navigue vers une page différente, le menu devrait se construire initialement - et sans toutes les animations, mais fait en JavaScript et non côté serveur.

Maintenant, je me demande comment je pourrais désactiver complètement toutes les transitions/animations temporairement, jusqu'à ce que le menu soit construit.

J'ai pensé à créer une sous-classe qui remplace les animations, mais cela ne semble pas fonctionner, car c'est toujours l'animation/la transition définie dans la classe de base qui est utilisée ?

Réponse n°1

Je suggérerais d'appliquer vos animations/transitions via une classe ajoutée par JavaScript après que le menu soit construit.

Il y a la propriété animation-play-state qui peut mettre les animations en pause, mais elle est apparue (avec préfixe) seulement dans Safari 5 et Chrome 4 (par opposition à Safari 4 et Chrome 2 pour les autres propriétés d’animation), et je ne suis pas sûr qu'elle fonctionnerait pour vos besoins.

Réponse n°2

Vous pouvez définir la transition-duration sur 0s lors de la construction du menu, puis la remettre à la valeur souhaitée par la suite.