angulaire.js - Pourquoi l'ajout d'une transition CSS3 entraîne-t-il l'échec de la liaison de données angulaires ?

Question

Le problème n'est pas facile à décrire, aidez-moi s'il vous plaît à découvrir ce qui se passe.

1. Une page de liste (telle qu'une liste d'utilisateurs commune). Étant donné que chaque élément de la liste a un paramètre box-shadow, lorsque la souris survole, le box-shadow changera afin de créer cet effet. plus lisse, ajoutez transition；

2. Cette liste comporte une zone de saisie de filtre. Entrez certains mots-clés pour correspondre aux éléments correspondants dans la liste, et d'autres éléments seront supprimés du DOM. Il s'agit d'un effet de filtrage de liaison de données angulaire typique ; >

Le problème est que tant que
3. est là, il y aura des problèmes de liaison de données. Les performances spécifiques sont les suivantes : en supposant que la liste comporte 10 éléments, le mot-clé filtré peut correspondre à l'un d'entre eux. Cependant, après avoir saisi le mot-clé, les éléments correspondants apparaîtront certainement, et il y aura également plusieurs éléments sans correspondance (le nombre est incertain). , mais à chaque fois il y aura des résidus à chaque fois). Ensuite, si vous utilisez la souris pour faire flotter ces éléments, ceux qui correspondent continueront d'exister et ceux qui ne correspondent pas disparaîtront

   transition ;

Si vous supprimez
4. tout sera normal.

   transition

Cette question me laisse perplexe. Même après avoir interrogé des experts de Google, je n'ai trouvé aucun cas similaire. J'ai dû demander à des personnes connaissant Angular de m'aider à comprendre ce que cela signifie ? La version angulaire est

, merci !

1.2.13

De plus, je viens de découvrir par hasard un détail : il y a en fait deux de ces éléments de liste

---

Un pour le conteneur extérieur et un pour l'image interne, similaire à la structure suivante :

<!--这是外包容器，有阴影，有 transition-->
<p class="item-wrapper">
    <!--这是里层内容，是图片，有 scale 效果，也有 transition-->
    <p class="item-inner">
        ...
    </p>
</p>

Le transition intérieur

ne posera pas de problèmes, seul l'extérieur

le fera (ce qui, je pense, devrait l'être, juste pour être sûr). La solution temporaire ne peut donc être que de sacrifier l'effet de dégradé externe... Cependant, je veux toujours vraiment savoir pourquoi transition affecte-t-il la liaison de données d'Angular ? transition

Answer 1

Je l'ai résolu moi-même.

1. Réponse simple : déplacez transition vers une pseudo-classe, c'est-à-dire :hover ; ou n'utilisez pas de CSS natif et utilisez ng-animate à la place, mais dans de nombreux cas, la solution native est plus simple que ng-animate.
2. Réponse complète : voir https://github.com/angular/angular.js/issues/6395.