Angular.js: 애니메이션중인 요소에서 ng-show / hide가 지연됩니다.

ngAnimate는 트리거 중 요소에서 활성화 된 모든 키 프레임 / 전환 코드가 ngAnimate를 통해 애니메이션 될 것이라고 가정하기 때문에 탐욕 스럽습니다. 따라서이 경우 .loader 가 ngShow / ngHide와 관련이 없음에도 불구하고 여전히 유효한 애니메이션으로 선택됩니다.

이 문제를 해결하려면 .ng-animate 클래스가 요소에 적용될 때 애니메이션 스타일을 지우면됩니다.

http://jsfiddle.net/PvS8k/4/

이것은 CSS 상속의 문제입니다. getComputedStyle에만 의존하지 않고 스타일을 감지하는 더 좋은 방법이 있다면 이러한 종류의 기이 한 문제를 피할 수 있습니다.

@matsko 이 특별한 경우는 실제로 회귀라고 생각합니다. @SimpleAsCouldBe 의 plunker 또는이 plunker http://plnkr.co/edit/5cfIXfNryNOzK66q9YWL?p=preview 에서 볼 수 있듯이 1.2.17에서는 요소가 즉시 사라지지 않지만 1.2.16에서는 그렇습니다. 이것은 https://github.com/angular/angular.js/commit/55b2f0e8620465559016b424967d90a86af597c0 때문일 가능성이 큽니다.
나는 이것이 좀 더 면밀한 조사를 필요로한다고 생각한다. 적어도 이에 대한 변경 로그와 문서에 메모가 있어야합니다.

해결 방법에 감사드립니다. 예상대로 트릭을 수행합니다.

두 점. 하나는 ng-show에 특정한 것이고 다른 하나는 일반적입니다.

ng-show + 무한 애니메이션 :

무한 애니메이션이 ng-show 의 숨기기를 _really_ 지연해야합니까? 나는 초를 세어 보았고 그것을 숨기기 위해 기다리는 것이 항상 4 초는 아닙니다. 때때로 그것의 5 또는 7 ... 다양한 것 같습니다. 또한 확인란을 다시 켜고 끄면 숨겨지지 않습니다. 여기 어딘가에 실제 버그가 숨어있는 것 같아요.

철학적

비 기고자로서 나는 많은 말을 할 수 없지만 옵트 아웃은이 라이브러리에 적합한 전략이 아닐 수 있습니다. JS 라이브러리가 CSS 규칙에 반응하도록하는 것은 놀랍도록 마술 적입니다. ng-animatable 요소에 태그를 지정해야한다면 이에 대비할 수 있습니다.

@SimpleAsCouldBe 예 저는 모든 애니메이션에 animate- 클래스 접두사가 있어야 ngAnimate가 애니메이션에 연결되도록하는 것이 가장 좋을 것이라고 생각했습니다.

지연과 관련하여 지연이있는 것이 아니라 ngAnimate가 무한 부분을 취소하고 애니메이션을 한 번만 실행하는 것입니다. 따라서 숨길 때 2 초 * 1.5 = 3 초 동안 기다린 다음 타임 아웃 검사를 실행하고 애니메이션을 닫습니다. 따라서 전혀 존재하지 않아야하는 불필요한 시간입니다. CSS 스타일 감지 만 매우 제한됩니다.

@Narretz 제공 한 커밋이이 특정 예제에 영향을 미칠 수 있지만 실제로는 회귀와 관련이 없습니다. 그 이유는 수정 전에 있던 .ng-hide 스타일이 display:none 값을 다른 시간에 적용했기 때문입니다. 그러나 현재 수정 사항은 모든 애니메이션이 완료된 후에 만 ​​적용됩니다 ( .ng-animate 클래스가 제거 된 후).

아래 데모를 살펴보십시오. .blue 클래스에 대해 두 세트의 선택기 ( .ng-animate 및 제외)가 어떻게 있는지 확인하십시오. .blue 클래스가 즉시 적용 되었음에도 불구하고 ngAnimate는 여전히 애니메이션이 만료 된 것으로 생각하고 종료 시간 제한을 적용하기 전에 3s (2 초 * 1.5를 기억하십시오)를 기다릴 것입니다. 일반적으로는 2 초 것,하지만 animationend 이벤트는 요소의 실제 애니메이션 때문에 해고되지 않습니다 (이의 때문에 .loader 무한 및 겨 수준에 의해 트리거되지 않음) ( 또는 이전 예의 경우 ng-show). 따라서 이전 버그 수정으로 인해 영향을받지 않습니다.
http://jsfiddle.net/PvS8k/15/

ngAnimate를 덜 순진하게 만들고 animated- 가 CSS 접두사로 어딘가에있을 때만 애니메이션을 적용하는 것이 가장 좋습니다.

옵트 인 애니메이션 처리와 같은 주요 변경 사항에 개방적이라면 덜 놀라운 개발자 경험을 만들 수있을 것입니다.

평범한 .animate 보다는 .ng-animate 와 같은 특정 각도로 접두사를 붙일 수 있습니까?

나는 같은 문제를 가지고있다:
각도> = 1.2.17 http://jsfiddle.net/9krLr/17/
각도 1.2.16으로 모든 것이 좋습니다 : http://jsfiddle.net/EZpQQ/1/

@ tole42 이것은 해결 방법입니다.

.YourElementClass.ng-animate { -webkit-animation: none 0s; }

당신의 도움을 주셔서 감사합니다. 해결 방법이 작동하지 않습니다.
뭐가 잘못 되었 니?
http://jsfiddle.net/9krLr/21/

@ tole42 내가 볼 수있는 한 그 바이올린의 아무것도 애니메이션되지 않습니다. 애니메이션이 재단 라이브러리의 일부입니까? 보다 직접적인 재현 사례는 디버깅을 더 쉽게 만듭니다. 나에게 같은 문제처럼 보이지 않습니다.

@ tole42 와 같은 문제가 있다고 생각합니다. 모듈에 ngAnimate 포함을 사용하면 애니메이션을 적용하지 _ 않는 _ 경우 기본 사례에 대해 표준 ng-hide / ng-show 기능이 제대로 작동하지 않습니다. 즉, 애니메이션 클래스가 적용되지 않은 일반 요소에 ng-hide / ng-show를 사용할 때입니다.

<div ng-hide="hideme">hide me</div>

그 가죽에 애니메이션이 필요하다면 다음과 같이 할 것입니다.

<div ng-hide="hideme" class="myanimation">hide me</div>

표시 / 숨기기에 애니메이션을 적용하려는 앱의 인스턴스와 애니메이션을 원하지 않는 다른 인스턴스가 있습니다. 애니메이션을 적용하지 않으려는 경우 사용자 지정 애니메이션 클래스를 사용하여 표시 / 숨겨지는 요소를 장식하지 않습니다. 이 경우 Angular는 숨겨진 요소에 "ng-hide"클래스를 추가합니다.

모듈에 ngAnimate를 전혀 포함하지 않으면 예상대로 작동합니다. 요소가 즉시 사라집니다. 그러나 단순히 ngAnimate를 포함하면 @ tole42가 게시 한 두 개의 바이올린에 표시된 동작을 얻을 수 있습니다. "ng-hide"클래스를 추가 한 요소가 실제로 사라지기 전에 지연이 있습니다. 애니메이션을 사용하지 않으면 즉시 사라집니다.

작동하는 것으로 보이는 몇 가지 해결 방법은 다음과 같습니다.

.ng-hide-add {
    transition: 0s linear all;
}

또는:

.ng-hide {
    display: none !important;
}

그러나 애니메이션이 아닌 방식으로 단순히 무언가를 숨기려고하는 경우에 필요하다는 것은 옳지 않은 것 같습니다.

몇 가지 추가 발견에 대한 후속 조치를 위해 ...

문제를 가능한 가장 간단한 시나리오 (일반 div 표시 / 숨기기)로 요약하려고하면 문제가 나타나지 않습니다.

@ tole42 가 게시 한 바이올린에서 Foundation.css가 사용되고 있음을 발견했으며 예제에서는 입력 필드 표시 / 숨기기 문제를 보여줍니다. 내 경험은 비슷했지만 (입력 필드로 문제가 나타남) bootstrap.css를 사용했습니다. 두 CSS 파일을 더 자세히 살펴보면 둘 다 입력 필드에 CSS 전환을 적용합니다.

angular-animate가 지속 시간을 선택하기 때문에 이러한 CSS 전환이 실제 범인으로 보입니다. 의도적으로 해당 전환을 애니메이션하려고하지 않더라도 이러한 요소를 표시하거나 숨길 때 시각적 지연이 발생합니다.

따라서 이것이 Angular가 해결하려고 시도해야하는 문제라고 생각하지 않습니다. 다른 CSS 라이브러리와 함께 angular-animate를 사용하는 부작용에 가깝습니다. 예상하지 못한 CSS 전환이 포함되어있을 수 있습니다!

근본 원인을 찾는 데 오랜 시간이 걸렸지 만 마침내 의미있는 이유를 찾아서 좋았습니다.

예, 이것은 ngAnimate에서 중요한 문제이지만 getComputedStyle에 대한 제어 부족과 다른 라이브러리의 연속 전환으로 인해 ngAnimate에서이를 감지 할 수 없습니다.

이 문제를 해결하는 방법에는 두 가지가 있습니다.

1) .ng-animate 클래스의 스타일을 재정의합니다.
http://jsfiddle.net/9krLr/27/

이전에 작동하지 않는 이유는 CSS 특이성이 부족했기 때문입니다.

2) $animateProvider.classNameFilter(regex) 합니다. 이 경우 정규식은 모든 ngAnimate 트리거 애니메이션에 하드 블록을 배치하고 정규식이 애니메이션하려는 요소에있는 className과 일치하는 경우에만 애니메이션이 발생하도록 허용합니다.

오, 공급자에 구성을 넣는 것은 좋은 방법입니다. @matsko가 정말 좋아요!

@pnutshellmenace 빠른 솔루션에 감사드립니다. 그것은 내 하루를 구했습니다.

나는 여기서 최종 해결책이 무엇인지 이해하지 못합니다. @matsko 는 다음

ngAnimate를 덜 순진하게 만들고 애니메이션을 적용 할 때만 애니메이션을 적용하는 것이 가장 좋습니다. 어딘가에 CSS 접두사로 존재합니다.

그러나 나는 그런 구현을 보지 못했습니다. $animateProvider.classNameFilter(regex) 살펴 봤지만 다시 한 번 답변보다 더 많은 질문이 남아 있습니다. 이를 구현하는 실용적인 방법은 무엇이며 적용 가능한 클래스 이름이 둘 이상인 경우 어떻게됩니까?

ngAnimate가 내가 모든 것을 애니메이션하고 싶다고 가정해야 할 이유가 없습니다. 애니메이트하고 싶지 않은 것이 항상있을 것이고, 현재는 다른 방법보다 애니메이트하고 싶지 않은 것이 더 많기 때문에 수동으로 스타일을 지정하여 전환을 비활성화 할 수 있습니다.

편집 : 일을 원근법으로 만드는이 블로그 항목을 찾았습니다. 시도해 보겠습니다 : http://blog.fgribreau.com/2014/03/how-to-configure-ng-animate-to- work-on.html

편집 2 : $animateProvider.classNameFilter(/enable-animate/); 는 효과가 있었지만 그 과정에서 몇 가지 흥미로운 동작을 발견했습니다.

나는 ngAnimate에 의존하는 써드 파티 앵귤러 모듈의 .js 파일을 포함 시켰고, 어떻게 든 내 자신의 모듈에서도 애니메이션이 트리거되도록했습니다. 어떻게 든 ngAnimate가 부모 모듈 범위에 영향을 미쳤습니까?

비동기 작업에 $scope.$evalAsync(); 를 사용하는이 답변 을 선호합니다. 잘 작동합니다.