ng-animate複数の表の行がアニメートされない

Question

アイテムがテーブルに表示されているときにハイライトしようとしています。同時に2つ、3つ、またはそれ以上のアイテムが表示される場合があります。ただし、ng-animateはではありません。はこれを正しく処理しているようです。

次のようなフィドルでは、テーブル行の実際の使用例を見ることができます（div要素の例に沿って）。 div要素は適切にアニメーション化されます。テーブルの行要素はそうではありません。 （簡体字）

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; 
} 

注：
1. divの要素が適切にアニメーション化するように見えます。それは比較のためのフィドルに含まれています。
2.テーブルの行をdiv要素に変更することはできません。
3.マイナータイムアウト（私のテストではわずか30ミリ秒）により、後続の行が適切にアニメートされます。 これは私の問題に実行可能な解決ではありません。 4.私はですng-enterアニメーションに関連するです。 5.テーブル行にアニメーションスタイルを適用しようとしましたが、成功しませんでした。

どうしてですか？さらに重要な点は、テーブル内のすべての新しい要素が適切にアニメーション化されるようにするにはどうすればよいですか？

Answer 1

テーブルのアニメーションCSSが行とセルの両方に適用されるため、競合が発生しています。アニメーションが行にのみ適用されるようにCSSを変更すると、アニメーションが正しく反映されます。

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; 
}