javascript - Ideiglenesen ki tudom-e kapcsolni az összes CSS3 átmenetet/animációt, miközben egy elemet építek?

Készítettem egy meglehetősen összetett menüt egy weboldalhoz. A menü nagymértékben a CSS3 alapú animációktól él. Azonban, amikor egy másik oldalra navigálok, a menünek eleinte fel kell épülnie - minden animáció nélkül, de JS-sel megvalósítva és nem szerveroldalon.

Most azon gondolkodom, hogyan tudnám ideiglenesen teljesen letiltani az összes átmenetet/animációt, amíg a menü össze nem épül.

Az jutott eszembe, hogy létrehozok egy alosztályt, amely felülírja az animációkat, de úgy tűnik, nem működik, mivel mindig az alap osztályban meghatározott animációt/átmenetet használják?

Válasz #1

Azt javasolnám, hogy az animációkat/átmeneteket egy osztályon keresztül alkalmazd, amelyet a JavaScript ad hozzá, miután a menü felépült.

Van az animation-play-state tulajdonság, amely leállíthatja az animációkat, de ez csak Safari 5-ben és Chrome 4-ben jelent meg (előtaggal), szemben a többi animációs tulajdonsággal, amelyek Safari 4-ben és Chrome 2-ben jelentek meg, és nem vagyok biztos benne, hogy ez működne az Ön céljaira.

Válasz #2

A transition-duration-t 0s-re állíthatod a menü készítése közben, majd utána visszaállíthatod a kívánt értékre.