AngularJS 1.2 - ngAnimate not working

Question

AngularJS 1.2에서 ng-animate를 처음 사용했습니다. 왜 ng-animate가 특정 클래스 이름을 작동시키지 않는지 모르지만 예제에서 본 단순한 페이드의 기본값을 사용합니다. 이 예에서

, 나는 '애니메이션'으로 내 NG-애니메이션 클래스를 설정하려고 : http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

을하지만 기본값을 사용하고, 애니메이션에 대한 내 클래스 이름 인 경우 그냥 ".ng 입력" and ".ng-leave", 애니메이션의 페이드는 잘 작동하는 것 같습니다.

http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=preview

어떤 도움을 크게 감상 할 수, 감사합니다!

Answer 1

ng-animate 속성은 1.2에서 더 이상 사용되지 않습니다.

1.2에서는 특수한 명명 규칙을 사용하여 적절한 CSS 클래스를 정의합니다. 'animation'과 같은 특정 이름을 원하면 애니메이션을 적용 할 요소에 해당 클래스를 추가해야합니다.

올바른 CSS 클래스가있는 한 일부 지시문은 자동으로 애니메이션됩니다. 어떤 것을 찾을 수 있습니까 : http://docs.angularjs.org/api/ngAnimate

".ng-enter"클래스를 정의 할 때 두 번째 예제에서 애니메이션이 작동하는 이유입니다. 그러나 이것은 입력 애니메이션을 지원하는 모든 지시어를 자동으로 애니메이션화합니다.

HTML :

<li ng-repeat="item in items" class="animation">{{item}}</li> 

CSS (선명도에 대한 유지 선택기 그룹 해제) :

.animation { 
    -webkit-transition: 1s; 
} 

.animation.ng-enter { 
    opacity: 0; 
} 

.animation.ng-leave { 
    opacity: 1; 
} 

.animation.ng-enter.ng-enter-active { 
    opacity: 1; 
} 

.animation.ng-leave.ng-leave-active { 
    opacity: 0; 
} 

나는 그것이 '애니메이션'라는 이름의 클래스와 작동하도록 첫 번째 예를 업데이트

플런커 :http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview

Answer 2

Tasse가 ng-animate가 더 이상 사용되지 않으므로 클래스를 사용해야합니다. 당신이 AngularJS와 웹 사이트 http://www.nganimate.org/angularjs/ng-repeat/move에서 CSS를 복사하는 경우 는 당신은 Apply Angularjs Animation in 2 minutes 또한

Answer 3

중요한 모듈에 종속성으로 애니메이션 모듈을 추가하는 것을 잊지 확인 완전한 세부 사항에 대한 특정 형식

에 그 CSS를 수정해야 정의. 애니메이션을 작동시키는 데 어려움을 겪고있는 다른 모든 사람들이이 작업을 수행하지 않은 경우입니다.

angular.module('myApp', ['ngAnimate']); 

Answer 4

당신은 당신의 angular.min.js의 버전이 각-animate.min.js의 버전과 일치하는지 확인해야합니다.
나는 내 방식대로이 방법을 고쳤다.

Answer 5

ng-show 지시문을 사용하여 요소에 애니메이션을 적용하려는 경우 허용되는 답변에 추가됩니다.

.animation.ng-hide-remove { 
    transition:2s linear all; 
    opacity:0; 
} 

.animation.ng-hide-remove.ng-hide-remove-active { 
    opacity:1; 
} 

는 모든 각도 지침이 ng-enter, ng-enter-active, ng-leave and ng-leave-active이 추가 참고 :이 사용해야합니다 스타일입니다. 예를 들어, ng-show 지시문은 애니메이션 시작 부분에 ng-hide-remove을 추가하고 끝에는 ng-hide-remove-active을 추가합니다. 자세한 내용은 다음 링크를 참조하십시오. https://www.w3schools.com/angular/angular_animations.asp