bir ui-yönlendirici durum değişikliği animasyon: animasyon

Question

İşte olgusunun plunker var bittiğinde div kısaca yeniden görünür: http://plnkr.co/edit/xLfXyDcwKtHPM7Sdhygf?p=preview

iğrenç düzen yok saymak; "Oturum aç" ı tıklattığınızda sorun görünür - FadeOutDown animasyonu tetiklenir, div, sayfanın altına doğru ilerler, ancak animasyon bittiği gibi, orijinal konumunda kısa bir süre yeniden görünür.

Tüm webdev oyununa çok yeniyim, bu yüzden bu sorunun ngAnimate, ui yönlendiricisi veya CSS'de ng-enter/ng-leave kullanma biçimiyle ilgili olup olmadığı konusunda emin değilim. . Görünüşe göre solgun bir kez gözden kaybolduğunda, divun gitmesini istemiştim.

Benim yaklaşım daha sonra diğer divlere için benzeri CSS

[ui-view].ng-leave #first-div { 
    animation: fadeOutDown 1s; 
} 

bu tür geçiş animasyon Ve bir ui-sref yoluyla geçişi tetikler etmektir. Teknik olarak çalışır, ancak animasyon döneminin sonunda bu tuhaf eseri vardır.

Herhangi bir fikrin var mı? Teşekkürler!

Answer 1

bunu kullanabilirsiniz:

[ui-view].ng-enter, [ui-view].ng-leave { 
    position: absolute; 
    left: 0; 
    right: 0; 
    -webkit-transition:all .5s ease-in-out; 
    -moz-transition:all .5s ease-in-out; 
    -o-transition:all .5s ease-in-out; 
    transition:all .5s ease-in-out; 
} 

[ui-view].ng-enter { 
    opacity: 0; 
    -webkit-transform:scale3d(0.5, 0.5, 0.5); 
    -moz-transform:scale3d(0.5, 0.5, 0.5); 
    transform:scale3d(0.5, 0.5, 0.5); 
} 

[ui-view].ng-enter-active { 
    opacity: 1; 
    -webkit-transform:scale3d(1, 1, 1); 
    -moz-transform:scale3d(1, 1, 1); 
    transform:scale3d(1, 1, 1); 
} 

[ui-view].ng-leave { 
    opacity: 1; 
    /*padding-left: 0px;*/ 
    -webkit-transform:translate3d(0, 0, 0); 
    -moz-transform:translate3d(0, 0, 0); 
    transform:translate3d(0, 0, 0); 
} 

[ui-view].ng-leave-active { 
    opacity: 0; 
    /*padding-left: 100px;*/ 
    -webkit-transform:translate3d(100px, 0, 0); 
    -moz-transform:translate3d(100px, 0, 0); 
    transform:translate3d(100px, 0, 0); 
} 

http://plnkr.co/edit/i9wHL9dNbV55EKZr06dn?p=preview

---

sadece ekleyebilir.

Dokümantasyon: https://docs.angularjs.org/api/ngAnimate#css-based-animations

[ui-view].ng-leave-active { 
    opacity: 0; 
}