처음에는 숨겨진 요소에서 애니메이션이 실행되지 않도록하려면 어떻게해야합니까?

Question

내 질문은 this one 및 this one과 비슷하지만 AngularJS 1.2.0에 새로운 애니메이션이 포함됩니다.

기본적으로 내 가입 페이지에는 처음에는 숨겨져 있고 특정 양식 요소가 유효하지 않은 경우에만 표시되는 요소가 있습니다 (잘못된 양식 요소를 가리키며 "적어도 비밀번호가 필요합니다. 8 자 "). 이러한 메시지는 표시되거나 숨겨지면서 페이드 인 및 페이드 아웃됩니다.

하지만 가입 페이지가 표시되면 요소가 표시되고 사라집니다. 그들은 간단히 볼 수 있습니다 (ng-cloak이 필요한 경우와 같이 화면에서 "깜박"또는 "깜박").

Here's 내가 겪고있는 행동을 보여줄 수있는 큰 그림. 이 plunker에서 상자와 상자의 가시성을 토글하는 버튼을 포함하는 기본 경로 ("로그인"페이지)를 설정했습니다. 실행을 클릭하면 어떻게 상자가 희미 해지는 지 확인하십시오. 그것은 단지 숨겨져 있어야합니다. (의도적으로 애니메이션을 느리게 설정하여 애니메이션을 볼 수 있습니다.)

처음에 애니메이션이 중단되는 것을 어떻게 막을 수 있습니까?

내가 해봤 일 : 생기 요소

• 설정 ng-cloak합니다.
• display: none !important 규칙이 추가 된 ng-cloak을 사용하십시오. (this 참조)
• 요소에 대해 "초기 설정"인 것처럼 요소에 display: none을 설정하십시오. (this 참조)

흥미롭게도, this 플 런커가 올바르게 동작하고 애니메이션이 처음에는 발생하지 않습니다. 이 플러커는 라우팅을 사용하지 않고 컨트롤러가 body 태그에 명시 적으로 설정됩니다. 라우팅을 사용하고 싶습니다.

Answer 1

사용중인 각도의 버전에 문제가 있습니다. 각도 애니메이션 그래서이 시도 내가 1.2 생각을 많이 변경 :

<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script> 
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script> 
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script> 

그것을 확인, 나는 여기 plunker가 고정 된 것 것을보고 다행

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