각도 1.3.3 - ngAnimate 1.3.3 클래스 추가하지 않음

Question

애니메이션을 적용하려고하는 앱이 있지만 클래스가 추가되지 않는 이유를 파악할 수 없습니다. 페이지에 스크립트를 포함하고 ngAnimate 종속성을 추가했습니다 (애니메이션 애니메이션을 삽입 할 수 있으므로 실제로로드되었는지 확인하는 것이 좋습니다). 내 설정은 매우 간단하여 작동하지 않는 것을 더욱 좌절하게 만듭니다. 나는 애니메이션 반복을 시도하고있다.

게시물을 짧게 유지하기 위해 키 프레임의 공급 업체 접두어를 사용하지 않았지만 적은 파일에 게시자 프리픽스를 넣었습니다. 크롬의 요소를 검사하고 수동으로 ng-leave를 클래스로 추가하면 애니메이션이 제대로 작동하므로 애니메이션이 정상적으로 작동합니다. ngAnimate가 예상대로 클래스를 추가하지 않습니다. 내 CSS 파일에서 뭔가를 놓칠 수 있습니다.

Installation of ngAnimate Module not working

그것은 당신이 특정 CSS 규칙을 설정하지 않는 한 ngAnimate이 클래스를 추가하지 않습니다 상태 : 내가에 혼란 스러워요 찾을 수있는 가장 가까운 것은이 링크입니다. 내 & .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