AngularJS와 애니메이션
AngularJS와 애니메이션을 제공합니다, 당신은 CSS 사용하실 수 있습니다.
AngularJS와 애니메이션은 각-animate.min.js 라이브러리를 도입 할 필요가있다.
<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
그것은 응용 프로그램 모델 ngAnimate 사용되어야한다 :
<body ng-app="ngAnimate">
애니메이션은 무엇입니까?
애니메이션 생성 된 HTML 요소를 변경하여 동적 효과이다.
예
DIV를 숨기려면 확인란을 선택합니다 :
숨기기 DIV : <입력 유형 = "체크 박스 "NG 모델 = "myCheck">
<사업부의 NG 숨기기 = "myCheck "> </ DIV>
</ BODY>
»시도
 | 애니메이션 응용 프로그램은 너무 많이하지만, 애니메이션의 적절한 사용은 페이지의 풍요 로움을 증가하거나 사용자가보다 쉽게 이해하도록 할 수 있습니다. |
|---|
우리는 응용 프로그램의 이름이 설정되어 적용 할 경우, 당신은 ngAnimate 모델에 직접 추가 넣을 수 있습니다 :
예
<H1> 숨기기 DIV : <입력 유형 = "체크 박스 "NG 모델 = "myCheck"> </ H1>
<사업부의 NG 숨기기 = "myCheck "> </ DIV>
<스크립트>
»시도
ngAnimate 완료?
ngAnimate 모델을 추가하거나 클래스를 제거 할 수 있습니다.
ngAnimate 모델은 애니메이션의 HTML 요소를하지 않지만, 이벤트가 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 전환 (전환) 또는 HTML 요소를 애니메이션 CSS 애니메이션을 사용할 수 있습니다, 일부 당신은 우리의 볼 수있는 CSS 전환 튜토리얼 , CSS 애니메이션 튜토리얼 .
CSS 전환
CSS는 우리에게 다른 변경된 CSS 속성 값으로 원활하게 전환 할 수 있습니다 :
예
div 요소 세트에서 .ng-hide 클래스를 전환은 0.5 초, 100 픽셀 0까지의 높이를 취합니다
사업부 {
전환 : 모든 선형 0.5 초;
배경 색상 : 연한 파랑;
높이 : 100 픽셀;
}
.ng 숨기기 {
높이 : 0;
}
</ 스타일>
»시도
CSS 애니메이션
CSS 애니메이션은 CSS 속성 값을 수정 원활하게 할 수 있습니다 :
예
div 요소는 설정에서 .ng-hide , -time 클래스를 myChange 가 100 픽셀에서 0으로 부드러운 높이가 될 것입니다, 애니메이션이 실행됩니다
@keyframes myChange {
에서 {
높이 : 100 픽셀;
}로 {
높이 : 0;
}
}
사업부 {
높이 : 100 픽셀;
배경 색상 : 연한 파랑;
}
div.ng 숨기기 {
애니메이션 : 0.5 초 myChange;
}
</ 스타일>
»시도