AngularJS 애니메이션

CSS의 도움으로 AngularJS는 애니메이션 전환을 제공합니다.

애니메이션은 무엇인가요?

애니메이션은 HTML 요소의 변환을 통해 움직임의 착각을 주는 것입니다.

예제

체크박스를 선택하여 DIV를 숨기세요:

<body ng-app="ngAnimate">
DIV를 숨기기：<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

직접 테스트해 보세요

애플리케이션은 애니메이션으로 가득 차지 않아야 하지만, 일부 애니메이션은 애플리케이션을 더 이해하기 쉽게 만들 수 있습니다.

저는 무엇이 필요합니까?

애플리케이션이 애니메이션을 준비하도록 해야 할까요? 그렇다면 AngularJS Animate 라이브러리를 포함해야 합니다:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

그런 다음,你必须必须在应用程序에서 참조합니다。 ngAnimate 모듈：

<body ng-app="ngAnimate">

또는,如果你的应用程序有名称，请将 ngAnimate 모듈에 의존성을 추가합니다：

예제

<body ng-app="myApp">
<h1>DIV 숨기기：<input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

직접 테스트해 보세요

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 클래스 값。

다른 지시는 DOM에 진입할 때 추가합니다： ng-enter 클래스 값을 추가하고, DOM에서 제거될 때 추가합니다： ng-leave 속성。

HTML 요소의 위치가 변경될 때，ng-repeat 지시는 또한 추가합니다： ng-move 클래스 값。

또한, 애니메이션 중에, 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으로 전환됩니다：

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

직접 테스트해 보세요

CSS 애니메이션

CSS 애니메이션은 주어진 지속 시간 동안 CSS 속성 값이 하나에서 다른 하나로 부드럽게 변경되도록 합니다:

예제

DIV 요소가 .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

직접 테스트해 보세요