angular.js - angularjs ng-animate在ng-repeat情況下不起作用問題
問題描述
想要達到ng-repeat時ng-enter,ng-leave時延遲或者一些背景動畫的顯示,進一步使用ng-enter-stagging,讓多項不同時顯示出來,但是在ng-repeat構建列表時動畫都沒有展示。查不到問題,找了很多demo來試,都沒有辦法。下面是HTML代碼:
<pre><p ng-repeat='item in items' class='repeated-item'> {{ item}}</p></pre>
下面是css代碼:
.repeated-item{ border: solid 1px; opacity: 1; transition:3s linear all;}/*動畫開始前*/.repeated-item.ng-enter, .repeated-item.ng-move { -webkit-transition:3s linear all; -moz-transition:3s linear all; -o-transition:3s linear all; background-color: red; opacity:0;}
試過把動畫加到.repeated-item上去,還是不起效。請各位老師幫忙解答一下!麻煩大家了!
問題解答
回答1:你確定你的transition是對的么?我怎么看到語法是:
那怎么著也應該是:
.repeated-item{ border: solid 1px; opacity: 1; transition: all 3s linear;}回答2:
同問,求大神
回答3:repeat的動畫是從無到有,加個按鈕把數據寫到items里面應該就可以有動畫了
相關文章:
1. linux - Ubuntu下編譯Vim8(+python)無數次編譯失敗2. java - 在搭建ssm的過程中 用junit測試Dao層 怎么樣都報錯 說連接不上jdbc3. javascript - 如何判斷用戶切換到了當前標簽頁?4. java - Mybatis關聯查詢5. css - 移動端 盒子內加overflow-y:scroll后 字體會變大6. java - 新手做一個安卓視頻播放器,想實現一個進度條,按鈕那種在視頻下方懸浮的功能,不知道思路!7. javascript - webpack 報錯 新人 求解8. javascript - H5頁面怎么查看console信息?9. nginx bind failed10. 前端 - CSS3 box-shadow如何設置,或者用什么方法可以產生圖中這樣陰影的效果。
