AngularJS $ animateCss在页面加载和视图更改上

Question

I use this controller to grab blog posts:

appCtrl.controller('NewsCtrl', ['$scope', '$http',
   function ($scope, $http) {
      var posts = [];
      $http.get("https://www.googleapis.com/blogger/v3/blogs/BLOG_ID/posts?&key=MY-API-KEY")
         .then(function (response) {
            posts = response.data;
            $scope.items = posts.items;
         });
      console.log($scope);
   }
]);

Then display them on the page like this:

<div ng-repeat="item in items" class="repeat_animation" animate-on-load>
      <h2>{{item.title}}</h2>
      <span ng-bind-html="item.content"></span>
   </div>

I have the following css to animate each returned post:

.repeat_animation {
   &.ng-enter-stagger,
   &.ng-leave-stagger,
   &.ng-move-stagger {
      -webkit-transition-delay: .2s;
      transition-delay: .2s;
      transition-duration: 0s;
      -webkit-transition-duration: 0s;
   }
   &.ng-enter,
   &.ng-leave,
   &.ng-move {
     -webkit-transition: .5s ease-in-out all;
     transition: .5s ease-in-out all;
   }
   &.ng-leave.ng-leave-active,
   &.ng-enter,
   &.ng-move {
     opacity: 0;
   }
   &.ng-leave,
   &.ng-move.ng-move-active,
   &.ng-enter.ng-enter-active {
     opacity: 1;
   }
}

The items animate in sequence if I load/reload the News view directly but they all animate at the same time if I change to a different page view and then go back again.

However by invoking the following directive they do animate each time I navigate from one page view to the News view but they don't animate if I reload the page without navigating to it from another view.

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

How can I force posts to always animate sequentially each time the page view is accessed, either directly or on view change?

Answer 1

In the end, the only way I could get staggering to work on page load and view change was by setting the from/to opacity style in the directive like this:

app.directive('animateOnLoad', ['$animateCss', function ($animateCss) {
   return {
      'link': function (scope, element) {
         $animateCss(element, {
            event: 'enter',
            structural: true,
            from: { 'opacity': 0 },
            to: { 'opacity': 1 }
         }).start();
      }
   };
}]);

I could not get it to work using css classes from the stylesheet (except intermittently using angular-animate.js version 1.4.3)