angular.js - CSS3 トランジションを追加すると Angular データ バインディングが失敗するのはなぜですか?

Question

問題を説明するのは簡単ではありません。何が起こっているのかを理解するのを手伝ってください。

1. リスト ページ (共通ユーザー リストなど)。リスト内の各項目には box-shadow 設定があるため、マウスをホバーすると box-shadow が変化します。より滑らかにするには、transition を追加します。

2. このリストにはフィルター入力ボックスがあります。リスト内の一致する項目と一致するキーワードを入力すると、他の項目が DOM から削除されます。これは典型的な Angular データ バインディング フィルター効果です。 >

問題は、
3. が存在する限り、データ バインディングに問題が発生することです。具体的なパフォーマンスは次のとおりです。リストに 10 個の項目があると仮定すると、フィルタリングされたキーワードはそのうちの 1 つに一致します。ただし、キーワードを入力すると、一致する項目は必ず表示されますが、一致しない項目もいくつかあります (数は不確かです)。 、しかし毎回残留物が毎回あります）。次に、マウスを使用してこれらの項目をフローティングすると、一致する項目は引き続き存在し、一致しない項目は消えます。

   transition

   を削除すると、すべてが正常になります。

4. transitionこの質問には困惑しました。Google の専門家に尋ねても同様のケースが見つかりませんでした。これが何を意味するのかを理解するには、Angular に詳しい人に尋ねる必要がありました。 Angular バージョンは

   です、よろしくお願いします!

さらに、私は偶然詳細を発見しました。これらのリスト項目は実際には 2 つあります。1.2.13 1 つは外側のコンテナー用、もう 1 つは内部ピクチャー用で、次の構造と似ています:

リーリー

---

内の

は問題を引き起こしません。問題が発生するのは外側の transition だけです (念のため、そうあるべきだと思います)。したがって、一時的な解決策は、外部グラデーション効果を犠牲にすることしかありません...しかし、それでも本当に知りたいのですが、なぜ

が Angular のデータ バインディングに影響を与えるのでしょうか?

Answer 1

自分で解決しました。

1. 簡単な答え: transition 移到 pseudo class 去，也就是 :hover；或者不要用原生 css，改用 ng-animate，但是很多时候原生方案要比 ng-animateをシンプルにする。
2. 完全な答え: https://github.com/angular/angular.js/issues/6395 を参照してください。