AngularJS 애니메이션
AngularJS는 CSS와 함께 사용할 수있는 애니메이션 효과를 제공합니다.
AngularJS는 애니메이션을 사용하여 Angular-Animate.min.js 라이브러리를 소개합니다.
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animat.min.js"> </script>
또한 애플리케이션에서 NGANIMAMEM 모델을 사용해야합니다.
<body ng-app = "nganimate">
애니메이션이란 무엇입니까?
애니메이션은 HTML 요소를 변경하여 생성 된 동적 변경 효과입니다.
예
DIV를 숨기려는 확인란을 확인하십시오.
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> div {전환 : 모든 선형 0.5s; 배경색 : Lightblue; 높이 : 100px; 너비 : 100%; 위치 : 상대; 상단 : 0; 왼쪽 : 0;}. ng-hide {높이 : 0; 너비 : 0; 배경색 : 투명; 상단 : -200px; 왼쪽 : 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animat.min.js"> </script> </head> <body ng-app = "nganimate"> <h1> 숨기기 : <input type = "checkbox"ng-model = "mycheck"> </h1> < ng-hide = "mycheck"> </div> </body> </html>실행 효과 :
참고 : 애플리케이션에는 너무 많은 애니메이션이 없어야하지만 애니메이션을 적절히 사용하면 페이지의 풍부함을 높이고 사용자가 쉽게 이해할 수 있습니다.
응용 프로그램이 이미 응용 프로그램 이름을 설정 한 경우 모델에 직접 NGAIMATE를 추가 할 수 있습니다.
예
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> div {전환 : 모든 선형 0.5s; 배경색 : Lightblue; 높이 : 100px; 너비 : 100%; 위치 : 상대; 상단 : 0; 왼쪽 : 0;}. ng-hide {높이 : 0; 너비 : 0; 배경색 : 투명; 상단 : -200px; 왼쪽 : 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animat.min.js"> </script> </head> <body ng-app = "myapp"> <h1> hide : <input type = "checkbox"ng-model = "mycheck"> <div ng-hide = "mycheck"> </div> <cript> var app = angular.module ( 'myapp', [ 'nganimate']); </script> </body> </html>실행 효과 :
Nganimate는 무엇을 했습니까?
Nganimate 모델은 클래스를 추가하거나 제거 할 수 있습니다.
Nganimate 모델은 HTML 요소를 애니메이션 할 수는 없지만 Nganimate는 HTML 요소를 숨기고 표시하는 것과 유사한 이벤트를 모니터링합니다. 이벤트가 발생하면 Nganimate는 사전 정의 된 클래스를 사용하여 HTML 요소를 애니메이션합니다.
클래스를 추가/제거하기위한 AngularJS 지침 :
ng-show
NG-HIDE
NG 클래스
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- 애니메이션
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으로 변경됩니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> div {전환 : 모든 선형 0.5s; 배경색 : Lightblue; 높이 : 100px;} src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animat.min.js"> </script> </head> <body ng-app = "myapp"> <h1> hide : <input type = "checkbox"ng-model = "mycheck"> <div ng-hide = "mycheck"> </div> <cript> var app = angular.module ( 'myapp', [ 'nganimate']); </script> </body> </html>CSS 애니메이션
CSS 애니메이션은 CSS 속성 값을 원활하게 수정할 수 있습니다.
예
.NG-Hide 클래스가 DIV 요소에 설정되면 MyChange 애니메이션이 실행되며, 이는 높이가 100px에서 0으로 부드럽게 변경됩니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <styfles> @keyframes mychange {from {height : 100px; } ~ {높이 : 0; }} div {높이 : 100px; 배경색 : lightblue;} div.ng-hide {애니메이션 : 0.5s mychange;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animat.min.js"> </script> </head> <body ng-app = "nganimate"> div : <input type = "checkbox"ng-model = "mycheck"> <div ng-hide = "mycheck"> </div> </body> </html>위의 것은 AngularJS 애니메이션에 대한 정보 모음입니다. 필요한 경우 참조하십시오.