首頁  >  問答  >  主體

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上去,還是不起效。請各位老師幫忙解答!麻煩大家了!

PHP中文网PHP中文网2714 天前521

全部回覆(3)我來回復

  • 迷茫

    迷茫2017-05-15 17:07:04

    你確定你的transition是對的麼?我怎麼看到文法是:

    那怎麼著也應該是:

    .repeated-item{
        border: solid 1px;
        opacity: 1;
        transition: all 3s linear;
    }

    回覆
    0
  • 高洛峰

    高洛峰2017-05-15 17:07:04

    同問,求大神

    回覆
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-15 17:07:04

    repeat的動畫是從無到有,加個按鈕把資料寫到items裡面應該就可以有動畫了

    回覆
    0
  • 取消回覆