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. 關于Mysql聯合查詢2. 求救一下,用新版的phpstudy,數據庫過段時間會消失是什么情況?3. javascript - 有沒有iOS微信中可以在背景播放視頻的方法?4. html5 - 百度Ueditor代碼高亮和代碼段滾動條沖突是怎么回事?5. linux - 編譯時提示頭文件#include <mysql/mysql.h>不存在,百度之后也沒解決6. PHP類屬性聲明?7. windows7 ping不通虛擬機VMware上的linux(ubuntu)的ip8. login.html登錄界面為什么和老師講課的屆而不一樣?9. javascript - 請問微信jssdk自定義分享是不是不能用了?10. javascript - 有沒有人在做網頁微信支付遇到如下問題
