angular.js - Why does adding CSS3 transition cause Angular data binding to fail?

Question

The problem is not easy to describe, please help me find out what is going on.

1. A list page (such as a common user list). Because each item in the list has a box-shadow setting, when the mouse is hovering, the box-shadow will change. In order to make this effect smoother, add transition；

2. This list has a filter input box. Enter some keywords to match matching items in the list, and other items will be removed from the DOM. This is a typical Angular data binding filtering effect;

3. The problem is, as long as transition is there, there will be problems with data binding. The specific performance is as follows: assuming that the list has 10 items, the filtered keyword can match one of them. However, after entering the keyword, matching items will certainly appear, and there will also be several unmatched items (the number is uncertain, but each time There will be residues every time). Then if you use the mouse to float these items, the matching ones will continue to exist, and the unmatched ones will disappear;

4. If you remove transition everything will be normal.

This question makes me puzzled. Even after asking Google experts, I couldn’t find any similar cases. I had to ask people who are familiar with Angular to help me figure out what this means? Angular version is 1.2.13, thank you!

---

In addition, I just accidentally discovered a detail: there are actually two of these list items transition One for the outer container and one for the internal picture, similar to the following structure:

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

The

inside transition will not cause problems, only the outer transition will (which I think it should be, just to make sure). So the temporary solution can only be to sacrifice the external gradient effect... However, I still really want to know, why does transition affect Angular's data binding?

Answer 1

I solved it myself.

1. Simple answer: Make transition 移到 pseudo class 去，也就是 :hover；或者不要用原生 css，改用 ng-animate，但是很多时候原生方案要比 ng-animate simple.
2. Full answer: See https://github.com/angular/angular.js/issues/6395.