누군가 AngularJs 애니메이션 명명법을 설명 할 수 있습니까?

Question

AngularJS 애니메이션을 설정하는 데 항상 어려움이 있습니다. 왜냐하면 아직 "얻으려고"하지 않기 때문입니다. TM 또는 이름이 바뀌었기 때문입니다. 전 확신 해요.

예를 들어 다음 CSS가 작동합니다. 요소는 표시 될 때 왼쪽에서부터 날아 들고 숨겨지면 왼쪽으로 돌아갑니다.

.fly-from-left { 
    transition:all linear 0.2s; 
    left:4px 
} 

.fly-from-left.ng-hide-remove { // this is the start point of the show animation 
    left: -20px; 
} 
.fly-from-left.ng-hide { // this is the endpoint of the hide animation 
    left: -20px; 
} 

하지만 내가보기에 얻지 못하는 이유는 쇼 애니메이션을 담당하는 선택기를 ng-hide-remove라고합니다. 누군가가 명칭을 밝힐 수 있다면, 나는 미래에 훨씬 쉽게 애니메이션을 설정하는 것을 발견 할 것이다.

Answer 1

ng-hide 지시어로 요소를 숨기면 .ng-hide이라는 CSS 클래스가 적용됩니다.

.ng-hide 클래스가 제거 될 때 트리거되는 애니메이션으로 클래스 .ng-hide-remove을 생각합니다.

도 추가를 트리거링 및 후크를 제거 에 의해 요소에 CSS 클래스의 변화에 ​​주목도

AngularJS와를 참조하십시오. 즉, CSS 클래스가 이 요소에 추가되거나 요소에서 제거되면 CSS 클래스 추가 또는 제거가 완료되기 전에 애니메이션이 사이에 실행될 수 있습니다. 는 (식 또는 NG 수준의 지시어는 요소를 사용하는 경우 AngularJS와는 클래스 변경 사항을 캡처 할 수 있음을 유의하십시오.)이 documentation

에서

을 그 관점에서, .ng-hide-remove이 좋습니다.