javascript - AngularJS $animateCss 在页面加载和 View 更改上

Question

我使用这个 Controller 来抓取博客文章:

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);
   }
]);

然后像这样在页面上显示它们:

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

我有以下 CSS 来为每个返回的帖子设置动画:

.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;
   }
}

如果我直接加载/重新加载新闻 View ，这些元素会按顺序进行动画处理，但如果我更改为不同的页面 View 然后再次返回，它们会同时进行动画处理。

然而，通过调用以下指令，每次我从一个页面 View 导航到新闻 View 时，它们都会动画化，但如果我重新加载页面而不从另一个 View 导航到它，它们就不会动画化。

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

如何强制帖子在每次访问页面 View 时始终按顺序显示动画，无论是直接访问还是在 View 更改时？

Answer 1

最后，我可以在页面加载和 View 更改上惊人地工作的唯一方法是在指令中设置 from/to 不透明度样式，如下所示:

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

我无法使用样式表中的 css 类让它工作(间歇性地使用 angular-animate.js 版本 1.4.3 除外)