Question

我使用此控制器来抓取博客文章：

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

如果我直接加载/重新加载新闻视图，那么这些项会按顺序生成动画，但如果我更改为不同的页面视图然后再返回，它们会同时生成动画。

但是，通过调用以下指令，每次从一个页面视图导航到“新闻”视图时，它们都会进行动画处理，但如果我重新加载页面而不从另一个视图导航到它，则它们不会生成动画。

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

如果直接或在视图更改时每次访问页面视图时，如何强制帖子始终按顺序设置动画？

Answer 1

最后，我唯一可以在页面加载和视图更改上工作的方法是在指令中设置from / to opacity样式，如下所示：

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）

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

1 个答案: