angular.js - 為什麼加了 CSS3 的 transition 會導致 Angular 資料綁定失效？

Question

問題不太描述，勞各位費心幫我看看是怎麼回事。

1. 一個清單頁面（例如常見的使用者清單），清單的每一項因為有box-shadow 的設置，在滑鼠懸浮的時候，box-shadow 會變化，為了讓這個效果更平滑，加了transition；

2. 這個清單有一個篩選輸入框，輸入一些關鍵字可以符合清單中符合的項，其他的項會從 DOM 中移除掉，這是典型的 Angular 資料綁定過濾效果；

3. 問題來了，只要 transition 在，資料綁定就會出現問題。具體表現為：假設列表有10 項，過濾的關鍵字可以匹配到其中的一項，然而在輸入關鍵字之後，匹配項固然會出現，不匹配項也會殘留若干個（數目不確定，但每次都會有殘留存在）。接著如果用滑鼠浮動這些項，那麼匹配的會繼續存在，不匹配的才會消失；

4. 若去掉 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 的資料綁定？

Answer 1

自己給解決了。

1. 簡單答案：把 transition 移到 pseudo class 去，也就是 :hover；或者不要用原生 css，改用 ng-animate，但是很多时候原生方案要比 ng-animate 簡單一點。
2. 完整答案：請參閱 https://github.com/angular/angular.js/issues/6395。