問題描述

問題不太好描述，勞各位費(fèi)心幫我看看是怎么回事。

一個列表頁面（比如常見的用戶列表），列表的每一項(xiàng)因?yàn)橛?box-shadow 的設(shè)置，在鼠標(biāo)懸浮的時候，box-shadow 會變化，為了讓這個效果更平滑，加了 transition；

這個列表有一個篩選輸入框，輸入一些關(guān)鍵字可以匹配列表中符合的項(xiàng)，其他的項(xiàng)會從 DOM 中移除掉，這是典型的 Angular 數(shù)據(jù)綁定過濾效果；

問題來了，只要 transition 在，數(shù)據(jù)綁定就會出現(xiàn)問題。具體表現(xiàn)為：假設(shè)列表有 10 項(xiàng)，過濾的關(guān)鍵字可以匹配到其中的一項(xiàng)，然而在輸入關(guān)鍵字之后，匹配項(xiàng)固然會出現(xiàn)，不匹配項(xiàng)也會殘留若干個（數(shù)目不確定，但每次都會有殘留存在）。接著如果用鼠標(biāo)浮動這些項(xiàng)，那么匹配的會繼續(xù)存在，不匹配的才會消失；

若去掉 transition 則一切正常。

這個問題讓我百思不得其解，問詢 Google 大神也沒找著相似的案例，只得求助熟悉 Angular 的各位幫我想想看這是什么道理？Angular 版本是 1.2.13，謝謝！

補(bǔ)充，剛才我偶然發(fā)現(xiàn)一個細(xì)節(jié)：這些列表項(xiàng)實(shí)際上有兩個 transition 外部容器有一個，內(nèi)部的圖片有一個，類似于下面的結(jié)構(gòu)：

<!--這是外包容器，有陰影，有 transition--><p class='item-wrapper'> <!--這是里層內(nèi)容，是圖片，有 scale 效果，也有 transition--> <p class='item-inner'>... </p></p>

里邊的 transition 是不會產(chǎn)生問題的，只有外部的 transition 才會（想想也應(yīng)該如此，只是為了確認(rèn)一下）。所以臨時的解決方案就只能是犧牲外部的漸變效果了……然而我依然非常想知道，為什么 transition 會影響 Angular 的數(shù)據(jù)綁定？

問題解答

回答1：

自己給解決了。

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