머리말
AngularJS는 CSS와 함께 사용할 수있는 애니메이션 효과를 제공합니다. AngularJS는 애니메이션을 사용할 때 angular-animate.min.js 라이브러리를 도입해야합니다.
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animat.min.js"> </script>
또한 애플리케이션에서 ngAnimate 모델을 사용해야합니다.
<body ng-app = "nganimate">
1. 애니메이션이란 무엇입니까?
애니메이션은 HTML 요소를 변경하여 생성 된 동적 변경 효과입니다.
<! 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 = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> <h3> 숨기기 : <입력 유형 = "수표" ng-model = "mycheck"> </h3> <div ng-hide = "mycheck"> </div> </body> </html> 응용 프로그램 이름이 설정된 경우 모델에 직접 ngAnimate 추가 할 수 있습니다.
<! 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 = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> </head> <body ng-app = "myapp"> <h3> Hide Div : <입력 유형 = "ng mycheck"> ng-hide = "mycheck"> </div> <cript> var app = angular.module ( 'myapp', [ 'nganimate']); </script> </body> </html>2. 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 .
(1) NG 클래스는 HTML 요소가 사용하는 CSS 클래스를 지정합니다.
ng-class 지침은 하나 이상의 CSS 클래스에 HTML 요소에 동적으로 바인딩하는 데 사용됩니다. ng-class 지시문의 값은 문자열, 객체 또는 배열 일 수 있습니다. 문자열 인 경우 여러 클래스 이름이 공백으로 분리됩니다. 객체 인 경우 부울 값인 키 값 쌍을 사용해야하며 값은 추가하려는 클래스 이름입니다. 수업은 키가 참인 경우에만 추가됩니다. 배열 인 경우 객체의 문자열 또는 조합으로 구성 될 수 있으며 배열의 요소는 문자열 또는 객체 일 수 있습니다.
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.js"> 배경색 : Lightblue; 패딩 : 20px; Font-Family : "Courier New";}. 토마토 {배경색 : 산호; 패딩 : 40px; Font-Family : Verdana;} </style> </head> <body ng-app = ""> </head> 클래스 선택 : </span> <select ng-model = "home"> <옵션 value = "sky"> sky color </옵션> <옵션 값 = "토마토"> 토마토 "> 토마토"> <h3> </h3> </h3> <h3> <h3> <h3> It! </h4> </div> </body> </html>(2) NG 클래스 -10은 NG 클래스와 유사하지만 선에서만 작동합니다. NG- 클래스 -ODD는 NG 클래스와 유사하지만 홀수 선에서만 작동합니다. NG- 클래스 -ODD는 NG 클래스와 유사하지만 홀수 선에서만 작동합니다.
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <style> .Stripedeven {컬러; 배경색 : 시안;}. Stripedodd {색상 : 흰색; 배경색 : 옐로그인;} </style> </head> <body ng-app = "myApp"> <table ng-controller = "myctrl"> <tr> <th> name </th> <th> country </th> </tr> <tr ng-Repeat = "x in Records"ng-eeven = " 'stripedd' <td> {{x.name}} </td> <td> {{x.country}} </td> </td> </table> </table> <script> var app = angular.module ( "myapp", []); App.controller ( "myctrl", function ($ scope) {$ scope. Futterkiste ","Country ":"Germany "}, {"name ":"Berglunds Snabbk ","Country ":"Sweden "}, {"name ":"Centro Comercial Moctezuma ","Country ":"Mexico "},"이름 ":"Ernst Handel ":"Aust "} ]}); </script> </body> </html>(3) NG-IF 조건이 잘못 인 경우 HTML 요소를 제거하십시오.
ng-if 지침은 표현식이 False 일 때 HTML 요소를 제거하는 데 사용됩니다. IF 문의 실행 결과가 true 인 경우 제거 된 요소가 추가되어 표시됩니다. ng-if 지침은 ng-hide 와 다르며, ng-hide 요소를 숨기고 ng-if DOM에서 요소를 제거합니다.
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> </head> <body ng-app = ""ng-init = "myvar = <h3> html : input" ng-model = "myvar"> </h3> <div ng-if = "myvar"> <h1> 환영 </h1> <p> 내 집에 오신 것을 환영합니다. </p> <hr> </div> <p> 확인란이 체크되지 않으면 div 요소가 제거됩니다. </p> <p> 확인란이 다시 선택되면 DIV 요소가 다시 제공됩니다. </p> </body> </html>
(4) NG-Checked는 요소가 선택되는지 여부를 지정합니다
ng-checked Directive는 확인란 또는 라디오 버튼의 확인 된 속성을 설정하는 데 사용됩니다. ng-checked 속성이 true를 반환하면 확인란 또는 라디오 버튼이 선택됩니다.
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> </head> <body ng-app = ""> <h3> 내 차량 : input type ""in putebbox "" all <br> <input type = "checkbox"ng-Checked = "all"> volvo <br> <input type = "intpox"ng-checked = "all"> ford <br> <input type = "checkbox"ng-checked = "all"> ford <br> <input type = "checkbox"ng-Checked = "all <herced"> ng checked. 모든 자동차를 선택합니다. </h3> </body> </html>
3. CSS 애니메이션을 사용하십시오
CSS 전환 또는 CSS 애니메이션을 사용하여 HTML 요소를 애니메이션으로 만들 수 있습니다.
(1) CSS 전환
CSS 전환을 사용하면 하나의 CSS 속성 값을 다른 CSS 속성 값으로 원활하게 수정할 수 있습니다. .ng-hide 클래스가 DIV 요소에서 설정되면 전환은 0.5 초가 걸리고 높이는 100px에서 0에서 0으로 변경됩니다.
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> <style> adlitity 0. 배경색 : Lightblue; 높이 : 100px;}. [ 'nganimate']); </script> </body> </html>
(2) CSS 애니메이션
CSS 애니메이션 myChange .ng-hide 하면 CSS 속성 값을 원활하게 수정할 수 있습니다.
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </scrames {@keyframes : mychange : 100px; } ~ {높이 : 10; }} div {높이 : 100px; 배경색 : lightblue;} div.ng-hide {애니메이션 : 10s mychange;} </style> </head> <body ng-app = "nganimate"> hide div : <input type = "checkbox"ng-model = "mycheck"> <div ng-hide = "mycheck"> </div> </html>요약
위의 것은 AngularJS 애니메이션에 관한 것입니다. 이 기사에서는 자세히 요약하고 예제 코드를 제공합니다. Angularjs를 배우는 모든 사람에게 도움이되기를 바랍니다.