ng-animate çoklu tablo satırları canlandırmıyor

Question

Öğeler bir tabloda göründüğünde bulanık olmaya çalışıyorum. Aynı anda görünen 2, 3 veya daha fazla öğe olabilir. Ancak, ng-animate,'un doğru şekilde işlenmesini sağlamaz.

Aşağıdaki klavyede, tablo satırlarının çalışma kullanım durumunu görebilirsiniz (yan yana, div öğelerini içeren bir örnek). Div elemanları uygun şekilde canlandırılır. Tablo satır öğeleri yok. (Basitleştirilmiş)

Demo Fiddle

HTML

<table class="animate-appear"> 
    <tr ng-repeat="item in repeatingItems"> 
    <td>{{item}}</td> 
    <td>{{item}}</td> 
    </tr> 
</table> 

CSS

table.animate-appear tr td { 
    padding: 5px 10px; 
    transition: all 1s ease; 
    opacity: 1; 
} 

table.animate-appear .ng-enter td, 
table.animate-appear .ng-leave.ng-leave-active td, 
table.animate-appear .ng-move td { 
    opacity: 0; 
    background-color: yellow; 
} 

table.animate-appear .ng-enter.ng-enter-active td, 
table.animate-appear .ng-leave td, 
table.animate-appear .ng-move.ng-move-active td { 
    opacity: 1; 
    background-color: white; 
} 

Notlar:
1. div öğelerinin doğru animasyon görünmektedir. Bu bir karşılaştırma noktası için kemanın içinde yer alır.
2. Tablo satırları div öğelerine değiştirilemez.
3. Küçük bir zaman aşımı (testimde 30 ms kadar az), sonraki satırların doğru bir şekilde canlandırılmasına neden olur. Bu, benim sorunum için geçerli bir çözüm değil değil. 4. ng-enter animasyonuyla ilgili numaralı numaralı telefonu kullanıyorum. 5. Animasyon stillerini tablo sırasına başarılı bir şekilde uygulamadan denedim.

Bu neden oluyor? Ve dahası, bir tablodaki tüm yeni elemanların doğru bir şekilde canlandırılmasına neden olmak için ne yapabilirim?

Answer 1

Tablonuzun animasyon css'si, hem satıra hem de hücreye uygulandığından çakışmaya neden oluyor. Eğer css'yi değiştirirseniz, animasyon sadece satır için geçerli olur, doğru bir şekilde animasyon yapmalıdır.

table.animate-appear tr { 
    transition: all 1s ease; 
    opacity: 1; 
} 

table.animate-appear td { 
    padding: 5px 10px; 
    opacity: 1; 
} 

table.animate-appear .ng-enter, 
table.animate-appear .ng-move { 
    opacity: 0; 
    background-color: yellow; 
} 

table.animate-appear .ng-enter.ng-enter-active, 
table.animate-appear .ng-leave, 
table.animate-appear .ng-move.ng-move-active { 
    opacity: 1; 
    background-color: white; 
}