AngularJS와는 CSS의 도움으로, 애니메이션 전환을 제공합니다.
애니메이션은 무엇입니까?
HTML 요소의 변화는 당신이 운동의 환상을 제공 할 때 애니메이션이다.
예:
DIV에 숨기려면 확인란을 선택합니다 :
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
»그것을 자신을 시도  | 응용 프로그램은 애니메이션으로 가득하지 않아야하지만, 일부 애니메이션은 이해하기 응용 프로그램을 쉽게 만들 수 있습니다. |
|---|
나는 무엇을해야합니까?
당신이 AngularJS와 애니메이션 라이브러리를 포함해야합니다, 애니메이션 응용 프로그램을 준비하기 :
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
ng-show 와 ng-hide 지시문 추가하거나 제거 ng-hide 클래스 값입니다.
다른 지시어는 추가 ng-enter 들이 DOM을 입력 클래스 값 및 ng-leave 그들이 DOM에서 제거됩니다 속성을.
ng-repeat 지시자는 또한 추가 ng-move HTML 요소의 위치가 변경 될 때 클래스 값입니다.
또한, 애니메이션 중에 HTML 요소는 애니메이션이 완료 될 때 제거 될 것이다 클래스 값의 세트를 가질 것이다. 예 : ng-hide 지시어는이 클래스 값을 추가합니다 :
-
ng-animate -
ng-hide-animate -
ng-hide-add(요소가 숨겨져있을 경우) -
ng-hide-remove(요소가 보였다 될 경우) -
ng-hide-add-active(요소가 숨겨져있을 경우) -
ng-hide-remove-active(요소가 보였다 될 경우)
CSS를 사용하여 애니메이션
우리는 HTML 요소를 애니메이션 CSS 전환 또는 CSS 애니메이션을 사용할 수 있습니다. 이 튜토리얼은 당신에게 모두 표시됩니다.
CSS 애니메이션에 대한 자세한 내용은, 우리의 연구 CSS 전환 튜토리얼 과 우리의 CSS 애니메이션 자습서 .
CSS 전환
CSS 전이는 주어진 기간 동안, 다른 하나의 값으로부터 원활 CSS 속성 값을 변경할 수 :
예:
div 요소가지면 .ng-hide 클래스, 전이는 0.5 초 정도 소요되며, 높이가 원활하게 100 픽셀 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 애니메이션이 원활하게 100 픽셀 0에서 높이를 변경 할 실행합니다 :
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
»그것을 자신을 시도