AngularJS $ animateCss兩個頁面加載和查看變化

我用這個控制器搶博客文章：

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

的項目中，如果我加載序列動畫/重載新聞視圖directl y但是如果我切換到其他頁面視圖然後再返回，它們都會同時生成動畫。

但是，通過調用以下指令，每當我從一個頁面視圖導航到News視圖時，它們都會進行動畫製作，但是如果我重新加載頁面而不從另一個視圖導航到頁面，則不會生成動畫。

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

我怎麼能強迫的帖子總是依次將每個頁面視圖被訪問時動畫，無論是直接或看法的改變？

來源

2016-02-28 Andy

最後，我能得到令人咋舌網頁加載和查看變化工作的唯一方法是通過在指令像這樣從/設置不透明度風格：

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）

來源

2016-03-04 12:16:21 Andy

AngularJS $ animateCss兩個頁面加載和查看變化

回答

相關問題