ng-repeat geçişli animasyon sayfadaki angular yüklemesi angular 1.4+

Question

this other question'da, yanıt sayfa girişinde animasyon girişleri yapmak için bir geçici çözüm (kirli bir hack) sağlar.

Ama 1.4 yükselttikten sonra, bu açıklama:

$rootElement.data("$$ngAnimateState").running = false; 

artık çalışmıyor.

Not: Denedim ama (1.5 saniyeden daha fazla kabul edilemez) çalışması için büyük bir zaman aşımı vermek gerekir çünkü $timeout kullanma, benim için bir seçenek değildir.

Answer 1

Animasyonu, $ animateCss servisi ile manuel olarak arayabilirsiniz. animateOnLoad yönergesine dikkat ediniz:

angular.module('app', ['ngAnimate']); 
 

 
angular.module('app').controller('categoriesCtrl', ['$scope', function($scope) { 
 
    $scope.categories = ['12345', '6789', '9876', '54321']; 
 
}]); 
 

 
angular.module('app').directive('animateOnLoad',['$animateCss', function($animateCss) { 
 
    return { 
 
    'link': function(scope, element) { 
 
     $animateCss(element, { 
 
      'event': 'enter', 
 
      structural: true 
 
     }).start(); 
 
    } 
 
    }; 
 
}]);

.category { 
 
    display:block; 
 
    font-size:20px; 
 
    background:black; 
 
    color:#fff; 
 
    margin:10px; 
 
    padding:10px; 
 
    text-align:center; 
 
} 
 

 
.category.ng-enter { 
 
    /* standard transition code */ 
 
    -webkit-transition: 2s linear all; 
 
    transition: 2s linear all; 
 
    opacity:0; 
 
} 
 

 
.category.ng-enter.ng-enter-active { 
 
    /* standard transition styles */ 
 
    opacity:1; 
 
}

<script src="https://code.angularjs.org/1.4.4/angular.js"></script> 
 
<script src="https://code.angularjs.org/1.4.4/angular-animate.js"></script> 
 
<div data-ng-app="app" data-ng-controller="categoriesCtrl"> 
 
<div class="category" ng-repeat="category in categories" animate-on-load> 
 
    {{category}} 
 
</div> 
 
</div>