angular.js - CSS3 トランジションを追加すると Angular データ バインディングが失敗するのはなぜですか?
给我你的怀抱
给我你的怀抱 2017-05-15 16:49:16
0
1
699

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

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

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

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

    transition

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

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

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

リーリー
内の

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

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

给我你的怀抱
给我你的怀抱

全員に返信(1)
巴扎黑

自分で解決しました。

  1. 簡単な答え: transition 移到 pseudo class 去,也就是 :hover;或者不要用原生 css,改用 ng-animate,但是很多时候原生方案要比 ng-animateをシンプルにする。
  2. 完全な答え: https://github.com/angular/angular.js/issues/6395 を参照してください。
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート