ngAnimate는 무엇을합니까?
ngAnimate 모듈은 클래스를 추가하고 제거합니다.

ngAnimate 모듈은 HTML 요소를 애니메이션화하지 않지만 ngAnimate가 HTML 요소의 숨기기 또는 표시와 같은 특정 이벤트를 감지하면 요소는 미리 정의 된 클래스를 가져 와서 애니메이션을 만들 수 있습니다.

AngularJS의 클래스 추가 / 제거 지시문은 다음과 같습니다.

ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show및 ng-hide지침은 추가하거나 제거 ng-hide클래스 값입니다.

다른 지시문 ng-enter은 DOM을 입력 할 때 클래스 값을 추가 하고 DOM에서 ng-leave제거되면 속성을 추가합니다.

ng-repeat지침도 추가 ng-moveHTML 요소의 위치가 변경 될 때 클래스 값입니다.

또한 애니메이션이 진행 되는 동안 HTML 요소에는 애니메이션이 끝나면 제거되는 클래스 값 집합이 있습니다. 예 : ng-hide지시문은 다음 클래스 값을 추가합니다.

ng-animate
ng-hide-animate
ng-hide-add (요소가 숨겨져있는 경우)
ng-hide-remove (요소가 표시 될 경우)
ng-hide-add-active (요소가 숨겨져있는 경우)
ng-hide-remove-active (요소가 표시 될 경우)
CSS를 사용한 애니메이션
CSS 전환이나 CSS 애니메이션을 사용하여 HTML 요소를 애니메이션으로 만들 수 있습니다. 이 자습서에서는 두 가지를 모두 보여줍니다.

CSS 애니메이션에 대한 자세한 내용은 CSS 전환 자습서 와 CSS 애니메이션 자습서를 참조하십시오 .

CSS 전환
CSS 전환을 사용하면 CSS 속성 값을 일정 기간 동안 한 값에서 다른 값으로 부드럽게 변경할 수 있습니다.

예:
DIV 요소가 .ng-hide클래스를 가져 오면 전환에는 0.5 초가 걸리고 높이는 100px에서 0으로 부드럽게 변경됩니다.

<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>