Angular 1.3.3 - ngAnimate 1.3.3不添加類

Question

我有一個應用程序，我試圖動畫，但我似乎無法弄清楚爲什麼不添加類。我在頁面上包含腳本，添加了ngAnimate依賴項（它允許我注入$ animate，所以我認爲這是一個很好的檢查，看它是否實際加載？）。我的設置非常簡單，這使得它無法工作更令人沮喪。我正在嘗試製作一個ng-repeat動畫。

爲了保持文章簡潔，我忽略了關鍵幀中的供應商前綴，但我確實將它們放在了我的較少文件中。當我檢查chrome中的元素並手動添加ng-leave作爲類時，它應該進行動畫處理，所以我非常確定我的動畫沒問題，只是ngAnimate不像我期望的那樣添加類。我可能會在我的css文件中丟失一些東西。我發現我的困惑最接近的是此鏈接：

Installation of ngAnimate Module not working

它指出，ngAnimate將不添加類，除非你不設置具體的CSS規則。我很困惑我的& .ng-leave是否足以讓ngAnimate選擇它，還是我需要添加更多？如果這很重要，我的ng-repeat也在一個指令模板中。一切都在頁面上呈現，沒有動畫觸發器。

我花了最後幾個小時查看任何與此問題有關的人的遠程相關鏈接，並嘗試了我發現的所有內容，但沒有任何結果能夠正常工作。代碼如下

//css 
@keyframes rollOut { 
    from { 
    opacity: 1; 
    } 
    to { 
    opacity: 0; 
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -o-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    } 
} 
.roll-out.ng-leave { 
    -webkit-animation: rollOut 5s linear; 
    -moz-animation: rollOut 5s linear; 
    -o-animation: rollOut 5s linear; 
    animation: rollOut 5s linear; 
} 

//html 
<div ng-repeat="item in list track by $index" class="roll-out"> 
     <div>{{ item }}</div> 
</div> 


//app.js (loaded correctly?) 
(function() { 
    'use strict'; 

    var modules = ['core', 'gui', 'etc']; 
    var submodules = ['filter', 'service', 'directive']; 
    var libmodules = ['ui.bootstrap', 'ngAnimate']; 

    modules.forEach(function(module) { 
     submodules.forEach(function(sub) { 
      angular.module(module + '.' + sub, []); 
     }); 
     angular.module(module, submodules.map(function(a) { return module + '.' + a; })); 
    }); 

    angular.module('myApp', modules.concat(libmodules)); 

}()); 

Answer 1

這是否適合您？

CSS：

.roll-out.ng-leave { 
    opacity: 1; 
    transition: all 5s linear; 
} 

.roll-out.ng-leave.ng-leave-active { 
    opacity: 0; 
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -o-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
} 

HTML：

<div ng-repeat="item in list track by $index" class="roll-out"> 
     <div>{{ item }}</div> 
</div 

plunker