国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

angular.js - 為什么加了 CSS3 的 transition 會導(dǎo)致 Angular 數(shù)據(jù)綁定失效?
給我你的懷抱
給我你的懷抱 2017-05-15 16:49:16
0
1
800

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

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

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

  3. 問題來了,只要 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ù)存在,不匹配的才會消失;

  4. 若去掉 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ù)綁定?

給我你的懷抱
給我你的懷抱

全部回復(fù)(1)
巴扎黑

自己給解決了。

  1. 簡單答案:把 transition 移到 pseudo class 去,也就是 :hover;或者不要用原生 css,改用 ng-animate,但是很多時候原生方案要比 ng-animate 簡單一些。
  2. 完整答案:參見 https://github.com/angular/angular.js/issues/6395。
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板