AngularJS 1.2 - ng애니메이트가 작동하지 않음

AngularJS 1.2 - ng애니메이트가 작동하지 않음

AngularJS 1.2로 ng-animate를 사용하는 것은 처음입니다. 왜 내 ng-animate가 특정 클래스 이름을 작동하지 않지만 예제에서 본 간단한 페이드에 대해 기본값으로 작동하는지 잘 모르겠습니다.

이 예제에서 나는 ng-animate 클래스를 'animation'로 설정하려고 합니다. http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

기본값을 사용하고 애니메이션의 클래스 이름이 ".ng-enter"와 ".ng-leave"일 때 애니메이션에서 페이드가 잘 되는 것 같습니다.

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

어떤 도움이라도 주시면 대단히 감사하겠습니다, 감사합니다!

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

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

올바른 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

또한 모듈 정의에 종속 요소로 애니메이션 모듈을 추가해야 합니다.다른 사람이 애니메이션을 작동시키는 데 문제가 있을 경우를 대비하여 이 작업을 수행하지 않습니다.

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

angular.min.js 버전이 angular-animate.min.js 버전과 일치하는지 확인해야 합니다.
이런 식으로 제 것을 고쳤습니다.

테세가 ng-animate가 더 이상 사용되지 않는다고 말했듯이, 우리는 수업을 사용해야 합니다.angularjs 웹 사이트 http://www.nganimate.org/angularjs/ng-repeat/move 에서 CSS를 복사하는 경우 특정 형식으로 CSS를 수정해야 합니다.

자세한 내용은 Angularjs Angularjs Angularjs Angularzimation in 2분 내 적용 확인

이는 수용된 답변에 추가하여 다음과 같은 요소를 애니메이션화하려는 사람들을 위해 제공됩니다.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

언급URL : https://stackoverflow.com/questions/19394017/angularjs-1-2-nganimate-not-working