ng-animate 애니메이션 방향

Question

간단한 ng-animate 동작을 얻으려고하지만 벽을 치고 내가 잘못하고있는 것을 해결할 수 없습니다.

내 코드에는 UI 뷰가 도착해야하는 방향을 지정하는 클래스가있는 angularui UI가 포함되어 있습니다. 화면의 왼쪽 또는 오른쪽 중 하나에서 슬라이딩 패널의 느낌을 나타냅니다. 또는 데이터를 숨 깁니다.

내가 여기있는 것을 볼 수 있습니다 - 링크 화살표의 방향에주의하십시오.

http://plnkr.co/edit/H2eRr5pPNKTDHXFXsyUn

인터페이스 뷰 코드이고; 적절한 CSS가 UI 뷰는 어디에서 온의 방향을 변경해야 할 때 감지 할 수 routeChange 이벤트 리스너의 부부와 함께

<div ui-view class="{{whichWayToMove}}"></div>

.

나는 문제가 범위가 있다고 느끼지만 일부 외부 도움을 주시면 감사하겠습니다.

Answer 1

가끔 ui-view에 문제가있어서 가끔 잘못되었습니다. 내 문제는 클래스가 ui-view의 일부 였지만 ui-view가 복제되어 한 뷰와 한 뷰를 밀어 낼 수 있다는 것이 었습니다.이 복제 중에 하나의 뷰에는 이전 클래스가 있고 다른 뷰에는 새롭게 업데이트 된 클래스는 다음과 같습니다.

<div ui-view="" class="slide_from_left_to_right ng-animate ng-enter ng-enter-active"> 
</div> 
<div ui-view="" class="slide_from_right_to_left ng-animate ng-leave ng-leave-active"> 
</div> 

이렇게하면 애니메이션이 엉망입니다. class="{{whichWayToMove}}"을 부모 div에 넣으면이를 방지하고 CSS를 더 논리적으로 만듭니다. .slide_from_right_to_left은 두보기의 모든 애니메이션이있는 RTL 상황의 상위 클래스입니다. plnkr에서 무슨 뜻인지 알 수 있습니다.

Answer 2

문제는 탭을 전환 할 때마다 해당 탭에 대한 새 컨트롤러를 생성하므로 이전 상태를 등록 취소하지 않고 $ stateChangeStart에 대한 새 수신기를 계속 등록한다는 것입니다. 이것은 새로운 리스너가 등록되면 (whichWayToRemove 속성을 변경하기 위해) 등록 된 첫 번째 핸들러에 의해 결국 겹쳐 쓰여진다는 것을 의미합니다.

내 말은 plnkr에있는 콘솔 로깅을 살펴보십시오.

작동 버전은 $ rootScope가 아닌 $ scope에서 이벤트를 수신하므로 컨트롤러가 제거되면 $ scope가 함께 제거되므로 더 이상 해당 이벤트를 수신하지 않습니다. $ stateChangeStart 이벤트

업데이트

애니메이션 방금 클래스 때 설정 얻을하는 변경할 필요가 화살표 방향으로 발생하는 것으로 얻을 수 있습니다. 이 내용은 plnkr here에서 업데이트되었습니다. 컨트롤러가 생성 될 때 whichWayToMove 속성이 설정되기 때문에 리스닝 이벤트도 제거했습니다.