AngularJS 애니메이션
AngularJS는 CSS의 도움으로 애니메이션 전환을 제공합니다.
애니메이션이란 무엇입니까?
애니메이션은 HTML 요소의 변형이 모션의 환상을 주는 경우입니다.
예시:
DIV를 숨기려면 확인란을 선택하십시오.
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
응용 프로그램은 애니메이션으로 채워져서는 안 되지만 일부 애니메이션은 응용 프로그램을 더 쉽게 이해할 수 있도록 합니다.
내가 무엇이 필요 하나?
애플리케이션에서 애니메이션을 사용할 수 있도록 하려면 AngularJS Animate 라이브러리를 포함해야 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
그런 다음 ngAnimate애플리케이션에서 모듈을 참조해야 합니다.
<body ng-app="ngAnimate">
또는 애플리케이션에 이름이 있는 경우 ngAnimate애플리케이션 모듈에 종속성으로 추가합니다.
예시
<body ng-app="myApp">
<h1>Hide the 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-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show및 지시문 은 클래스 값 ng-hide을 추가하거나 제거합니다 .ng-hide
다른 지시문 ng-enter은 DOM에 들어갈 때 클래스 값을 추가하고 DOM에서 ng-leave제거할 때 속성을 추가합니다.
ng-repeat지시문은 또한 HTML 요소가 위치를 변경할 때 클래스 값을 추가 합니다 ng-move.
또한 애니메이션 중에 HTML 요소에는 애니메이션이 완료되면 제거되는 클래스 값 집합이 있습니다. 예:
ng-hide지시문은 다음 클래스 값을 추가합니다.
ng-animateng-hide-animateng-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>
CSS 애니메이션
CSS 애니메이션을 사용하면 주어진 기간 동안 CSS 속성 값을 한 값에서 다른 값으로 부드럽게 변경할 수 있습니다.
예시:
DIV 요소가 .ng-hide클래스를 가져오면 myChange
애니메이션이 실행되어 높이가 100px에서 0으로 부드럽게 변경됩니다.
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>