ng-enter-stagger動畫不起作用

我實際上試圖動畫由ng-repeat創建的div列表。ng-enter-stagger動畫不起作用

我希望他們一個一個出現。所以我看到我可以使用ng-enter-stagger，但它不起作用。

這裏是我的CSS：

.newsLeft.ng-enter{ 
    -webkit-transition:all linear 0.5s; 
    transition: all linear 0.5s ; 
    opacity:0; 
} 

.newsLeft.ng-enter-stagger{ 
    -webkit-transition-delay:2s; 
    transition-delay:2s; 

    -webkit-transition-duration:0s; 
    transition-duration:0s; 
} 

.newsLeft.ng-enter.ng-enter-active{ 
    opacity:1; 
}

這裏的HTML：

<div ng-repeat="news in newsList" class="newsLeft" animate-on-load> 
    <div class="newsComponent" animate-on-load> 
    <hr/> 
    <div class="newsDate">{{news.date}}</div> 
    <div class="newsSubT2">{{news.title}}</div> 
    <div>{{news.content}}</div> 
    </div> 
</div>

來源

2016-05-13 Romain Bouvet

AngularJS版本？ – tasseKATT

角1.4.4。角度版本可能是問題？ –

不確定。你能展示一些HTML嗎？ – tasseKATT

的問題是animate-on-load指令，所以刪除。

結構動畫在視圖更改後的第一個或第二個摘要循環中默認處於禁用狀態。您可以在父元素上使用ng-animate-children="true"來覆蓋此設置。

例如：

<body ng-animate-children="true"> 
    <div ng-view></div> 
</body>

演示：http://plnkr.co/edit/AqSt7jaLk0Nq0RKqvdhx?p=preview

注意，這可以在視圖中觸發其他的動畫（例如，用於ng-show）。

如果只想爲ng-repeat動畫您可以使用ng-if這樣的：

<div ng-repeat="news in newsList" class="newsLeft" ng-if="ready"> 
    ... 
</div>

和Controller：

$timeout(function() { 

    $scope.ready = true; 
});

來源

2016-06-02 13:31:38 tasseKATT

我從來沒有聽說過有生命的孩子！我的錯。非常感謝你的幫助 –

不要感覺不好，不經常提及。我在我的答案中添加了一個小更新。歡迎您:) – tasseKATT

ng-enter-stagger動畫不起作用

回答

相關問題