問(wèn)題描述

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

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

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

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

若去掉 transition 則一切正常。

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

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

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

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

問(wèn)題解答

回答1：

自己給解決了。

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