2011-11-29 11 views
5

Stworzyłem dość złożone menu na stronę internetową. Menu pochodzi z ogromnej ilości animacji opartej na CSS3. Jednak gdy przejdę do innej strony, menu powinno się początkowo nagromadzić - i bez wszystkich animacji, ale zrobić JS-mądry, a nie na serwerze.Czy mogę tymczasowo wyłączyć wszystkie przejścia/animacje CSS3 podczas budowania elementu?

Teraz zastanawiam się, w jaki sposób mogę całkowicie wyłączyć wszystkie przejścia/animacje, dopóki menu nie zostanie zbudowane.

Pomyślałem o utworzeniu podklasy, która przesłania animacje, ale wydaje się nie działać, ponieważ zawsze jest używana animacja/przejście zdefiniowane w klasie bazowej?

+0

Potencjalnie istotne: http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-znacznie –

Odpowiedz

3

Proponuję zastosować twoje animacje/przejścia przez klasę dodaną przez JavaScript po zbudowaniu menu.

Istnieje właściwość animation-play-state, która może wstrzymywać animacje, ale pojawiała się tylko (wstępnie) w Safari 5 i Chrome 4 (w przeciwieństwie do Safari 4 i Chrome 2 dla pozostałych właściwości animacji) i nie jestem pewien, czy to działałoby dla twoich celów.

+0

Mam poczucie, że masz absolutną rację. I mam uczucie niesamowitej radości, że nie pomyślałem o tym, zanim napisałem te 2.500 linii. Nadal marzę o łatwiejszym rozwiązaniu. – SquareCat

+0

Wiem co masz na myśli. Nie jestem pewien, czy jest to łatwiejsze - możesz usunąć daną klasę za pomocą JavaScript, gdy menu zacznie się budować, i ponownie dodać po zakończeniu. (Chociaż jeśli w klasie są inne style oprócz animacji, straciłbyś je również.) –

+0

Tak, o to chodzi. To dość skomplikowane. Ogólnie rzecz biorąc, jest to dla mnie tajemnicą, dlatego nie jest możliwe ustawienie przejścia/animacji z nową klasą i tym samym zastąpić wcześniej zdefiniowaną. Gdyby było to możliwe, na przykład przejście "zanikania" mogło być ustawione inaczej niż odpowiednie przejście "pojawiające się" (przy ustawieniu od nieprzezroczystości 0-1 i odwrotnej) – SquareCat

2

Można ustawić transition-duration na 0s podczas budowania menu, a następnie ustawić ponownie z powrotem na żądaną wartość.

Powiązane problemy