問題不太好描述,勞各位費(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ù)綁定?
自己給解決了。
transition
移到 pseudo class 去,也就是 :hover
;或者不要用原生 css,改用 ng-animate
,但是很多時候原生方案要比 ng-animate
簡單一些。