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