javascript - Kan jag tillfälligt stänga av alla CSS3-övergångar/animationer medan ett element byggs?

Jag har skapat en ganska komplex meny för en webbplats. Menyn lever på en enorm mängd animationer som är baserade på CSS3. Men när jag navigerar till en annan sida, bör menyn byggas upp initialt - och utan alla animationer, men gjord med JS och inte på serversidan.

Nu undrar jag hur jag helt kan inaktivera alla övergångar/animationer tillfälligt, tills menyn är byggd.

Jag funderade på att skapa en underklass som överskriver animationerna, men det verkar inte fungera, eftersom det alltid är animationen/övergången som definieras i basklassen som används?

Svar #1

Jag skulle föreslå att du tillämpar dina animationer/övergångar via en klass som läggs till av JavaScript efter att menyn har byggts.

Det finns egenskapen animation-play-state som kan pausa animationer, men den dök bara upp (med prefix) i Safari 5 och Chrome 4 (till skillnad från Safari 4 och Chrome 2 för de andra animationsegenskaperna), och jag är inte säker på om det skulle fungera för dina ändamål.

Svar #2

Du kan ställa in transition-duration till 0s medan du bygger menyn och sedan ställa tillbaka det till det önskade värdet efteråt.