2011-11-29 11 views
5

Web sitesi için oldukça karmaşık bir menü oluşturdum. Menü, CSS3'e dayanan büyük miktarda animasyondan geliyor. Ancak, farklı bir sayfaya gittiğimde, menü başlangıçta oluşturulmalı - ve tüm animasyonlar olmadan, ancak JS-wise ve serveride değil. Bir eleman oluşturulduğunda tüm CSS3 geçişlerini/animasyonlarını geçici olarak kapatabilir miyim?

Şimdi ben menü inşa edilene kadar ben tamamen, geçici olarak bütün geçişler/animasyonlar devre dışı nasıl merak ediyorum.

Animasyonları geçersiz kılan bir alt sınıf oluşturmayı düşündüm, ancak her zaman kullanılan temel sınıfta tanımlanan animasyon/geçiş olduğu için işe yaramıyor gibi görünüyor. Ben menü inşa edildikten sonra JavaScript tarafından eklediği bir sınıf aracılığıyla animasyonlar/geçişler uygulayarak öneririm

+0

Potansiyel olarak ilgili: http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily –

cevap

3

.

Animasyonları duraklatabilecek animation-play-state özelliği var, ancak Safari 5 ve Chrome 4'te (diğer animasyon özellikleri için Safari 4 ve Chrome 2'nin aksine) yalnızca (önceden belirlenmiş) görünüyordu ve emin değilim. amaçlarınız için çalışır.

+0

Kesinlikle doğru olduğunuzu hissediyorum. Ve bu 2.500 satırları yazmadan önce bunu düşünmeme inanılmaz bir his var. Yine de daha kolay bir çözüm hayal ediyorum. – SquareCat

+0

Ne demek istediğini biliyorum. Daha kolay olup olmadığından emin değilsiniz. Menü oluşturulduğunda söz konusu sınıfı JavaScript aracılığıyla kaldırabilir ve tamamlandıktan sonra yeniden ekleyebilirsiniz. (Sınıfta animasyon dışında başka stiller olsa da, bunları da kaybedersiniz.) –

+0

Evet, konu budur. Oldukça karmaşık. Genelde benim için bir gizem olan şey, yeni bir sınıfla bir geçiş/canlandırma yapmanın ve böylece daha önce tanımlanmış olanı geçersiz kılmanın mümkün olmamasıdır. Bu mümkün olsaydı, örneğin bir "solma" geçişi, "görünme" geçişinden farklı olarak zamanlanabilir (opaklıktan 0-1 ve tersine ayarlandığında) – SquareCat

2

Menüyü oluştururken transition-duration değerini 0s olarak ayarlayabilir ve daha sonra istediğiniz değere geri ayarlayabilirsiniz.

İlgili konular