ng-animate css ile belirli bir ui yönlendirici durum geçişi canlandırma

Question

Bir "giriş" durumu ve "ana" durum arasında geçiş yaparken basit bir giriş istemi animasyon oluşturmaya çalışıyorum. İşte yapmaya çalıştığım şeyin bir plunker: http://plnkr.co/edit/B0NOkcuamCPPeuSh6dAr?p=preview

Örnekler için çok fazla baktım (ve some bulundu), ancak makinemde yeniden oluşturamadım. Benim kod

, ben şöyle index.html içine içeriğini enjekte ediyorum:

<div ui-view class="login-screen"></div> 

animations.css bu sınıflardan birini iyi olduğu için ben bile bir animasyon almak için yapabileceği koşmak. Elde etmeye çalıştığım şey, animasyonu yalnızca içeriğe login.html dosyasında ateş etmek ve içeriği main.html'de el değmemiş halde bırakmak. Bağlantılı örneği yeniden oluşturmak için yuvalama durumlarını denedim (taklit etmeye çalıştığım bir plunker var), ama başarı olmadan - SASS/LESS'i neden işe yaramadığını söyleyecek kadar iyi anlamıyorum, ama sanki hiçbir animasyon olmadığı için CSS'imle yuvalanmış durumları seçemedim.

Şu anda, "giriş ekranı" sınıfı "ana" duruma aktarılıyor gibi görünüyor, çünkü animasyon devam ediyor. Bunu doğru bir şekilde nasıl yapacağımı anlayamıyorum ve yine de bunu CSS animasyonundan seçebiliyorum.

Herhangi bir ipucu çok takdir edilecektir. Teşekkürler!

Answer 1

Saatlerce etrafta dolaştıktan sonra, problemin temel olarak HTML'yi enjekte ederken CSS seçicilerinin nasıl düzgün uygulanacağı ve belirli css yapılandırmasıyla ilgili olduğu ortaya çıkıyor.

Herhangi bir animasyon uygulanmadan önce, ana öğe için bir geçiş kuralı tanımlanmalıdır (bu durumda [ui-view] özelliğine sahip div). Yani bu animations.css gider:

[ui-view] { 
    -webkit-transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    transition: all 0.6s; 
} 

Ardından seçmek için alt div en (olanları biz enjekte ediyorlar), sözdizimi şöyledir:

Çocuğunuzun div etiketlediğinizi Sağlanan

[ui-view].ng-enter #login-screen { 
    animation stuff; 
} 

id = "login-screen" ile, bu kural, enjekte edilen div'i seçer ve ngAnimate ng-enter sınıfını uyguladığında animasyonu ona uygular. Aynı prosedür, ng-terk ng girmek aktif uygulanır vb

bu anlamaya biraz zaman aldı nedeni KKO vermedi ve) 1 idi 2) plunker gösterir gibi bazı Bu geçiş kuralını tanımlamaksızın animasyon açıkça mümkündür. Yani, mantıksal olarak, AngularJS ve CSS seçim parçalarına hata noktaları olarak odaklanıyordum. Bu açık değildi, ama sonra tekrar, RTFM.