angular.js - 为什么加了 CSS3 的 transition 会导致 Angular 数据绑定失效？

问题描述

问题不太好描述，劳各位费心帮我看看是怎么回事。

一个列表页面（比如常见的用户列表），列表的每一项因为有 box-shadow 的设置，在鼠标悬浮的时候，box-shadow 会变化，为了让这个效果更平滑，加了 transition；

这个列表有一个筛选输入框，输入一些关键字可以匹配列表中符合的项，其他的项会从 DOM 中移除掉，这是典型的 Angular 数据绑定过滤效果；

问题来了，只要 transition 在，数据绑定就会出现问题。具体表现为：假设列表有 10 项，过滤的关键字可以匹配到其中的一项，然而在输入关键字之后，匹配项固然会出现，不匹配项也会残留若干个（数目不确定，但每次都会有残留存在）。接着如果用鼠标浮动这些项，那么匹配的会继续存在，不匹配的才会消失；

若去掉 transition 则一切正常。

这个问题让我百思不得其解，问询 Google 大神也没找着相似的案例，只得求助熟悉 Angular 的各位帮我想想看这是什么道理？Angular 版本是 1.2.13，谢谢！

补充，刚才我偶然发现一个细节：这些列表项实际上有两个 transition 外部容器有一个，内部的图片有一个，类似于下面的结构：

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

里边的 transition 是不会产生问题的，只有外部的 transition 才会（想想也应该如此，只是为了确认一下）。所以临时的解决方案就只能是牺牲外部的渐变效果了……然而我依然非常想知道，为什么 transition 会影响 Angular 的数据绑定？

问题解答

回答1：

自己给解决了。

简单答案：把 transition 移到 pseudo class 去，也就是 :hover；或者不要用原生 css，改用 ng-animate，但是很多时候原生方案要比 ng-animate 简单一些。完整答案：参见 https://github.com/angular/angular.js/issues/6395。