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。