반응형
SMALL
애니메이션을 넣는 방법
https://daneden.github.io/animate.css/ 여기 들어가서
css 파일 다운 받은 다음에
css 폴더 안에 넣어준 다음에
angularJS 받은 파일에 가보면
angular-animate.js 파일이 존재 한다 이것도
가져와서
ngAnimate 모듈을 주입 해 주고
AngularJS 를 사용하겠다고 ng-app="myApp" 해주고
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Step06_animate.html</title> <link rel="stylesheet" href="css/animate.min.css" /> <style> .fade-effect.ng-enter{ animation: fadeIn 1s; } .myImg.ng-enter{ animation: bounceInDown 1s; } .myImg.ng-leave{ animation: fadeOut 1s; } </style> <!-- angular js 로딩 --> <script src="js/angular.min.js"></script> <!-- ngAnimate 모듈을 사용하기 위한 js 로딩 --> <script src="js/angular-animate.min.js"></script> <script> // ngAnimate 모듈을 dependency 로 주입해준다. var myApp=angular.module("myApp", ["ngAnimate"]); myApp.controller("Ctrl1", function($scope){ $scope.msgs=[]; $scope.add=function(){ //입력한 문자열을 object 에 담는다. var obj={msg:$scope.msg}; // obj 를 배열에 추가 하기 $scope.msgs.push(obj); }; }); </script> </head> <body ng-controller="Ctrl1"> <input type="text" ng-model="msg"/> <button ng-click="add()">추가</button> <ul> <li class="fade-effect" ng-repeat="tmp in msgs">{{tmp.msg}}</li> </ul> <br /> <input type="checkbox" ng-model="isMake" /> <img src="images/image1.png" width="200" class="myImg" ng-if="isMake"/> </body> </html> | cs |
이렇게 코딩해주면
그림파일이 경로에 맞게 있다면 체크박스를 클릭함에 따라 그림파일이 Animate 적용 되는 것을 확일한 수 있다.
Animate 종류는
위에 링크 건데에 있음
반응형
LIST
'FrameWork > AngularJS' 카테고리의 다른 글
| AngularJS switch (0) | 2017.08.29 |
|---|---|
| AngularJS event (0) | 2017.08.29 |
| AngularJS from validation (0) | 2017.08.28 |
| Step04_showHide (0) | 2017.08.25 |
| Step03_class (1) | 2017.08.25 |
반응형
SMALL
애니메이션을 넣는 방법
https://daneden.github.io/animate.css/ 여기 들어가서
css 파일 다운 받은 다음에
css 폴더 안에 넣어준 다음에
angularJS 받은 파일에 가보면
angular-animate.js 파일이 존재 한다 이것도
가져와서
ngAnimate 모듈을 주입 해 주고
AngularJS 를 사용하겠다고 ng-app="myApp" 해주고
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Step06_animate.html</title> <link rel="stylesheet" href="css/animate.min.css" /> <style> .fade-effect.ng-enter{ animation: fadeIn 1s; } .myImg.ng-enter{ animation: bounceInDown 1s; } .myImg.ng-leave{ animation: fadeOut 1s; } </style> <!-- angular js 로딩 --> <script src="js/angular.min.js"></script> <!-- ngAnimate 모듈을 사용하기 위한 js 로딩 --> <script src="js/angular-animate.min.js"></script> <script> // ngAnimate 모듈을 dependency 로 주입해준다. var myApp=angular.module("myApp", ["ngAnimate"]); myApp.controller("Ctrl1", function($scope){ $scope.msgs=[]; $scope.add=function(){ //입력한 문자열을 object 에 담는다. var obj={msg:$scope.msg}; // obj 를 배열에 추가 하기 $scope.msgs.push(obj); }; }); </script> </head> <body ng-controller="Ctrl1"> <input type="text" ng-model="msg"/> <button ng-click="add()">추가</button> <ul> <li class="fade-effect" ng-repeat="tmp in msgs">{{tmp.msg}}</li> </ul> <br /> <input type="checkbox" ng-model="isMake" /> <img src="images/image1.png" width="200" class="myImg" ng-if="isMake"/> </body> </html> | cs |
이렇게 코딩해주면
그림파일이 경로에 맞게 있다면 체크박스를 클릭함에 따라 그림파일이 Animate 적용 되는 것을 확일한 수 있다.
Animate 종류는
위에 링크 건데에 있음
반응형
LIST
'FrameWork > AngularJS' 카테고리의 다른 글
| AngularJS switch (0) | 2017.08.29 |
|---|---|
| AngularJS event (0) | 2017.08.29 |
| AngularJS from validation (0) | 2017.08.28 |
| Step04_showHide (0) | 2017.08.25 |
| Step03_class (1) | 2017.08.25 |
