#실행결과 http://study.jeju.onl/ch23/products.html
(22장의 예제를 다시 사용하고 있어서 수정하여 작성했음)
본 장에서는 콘텐츠 전환 애니메이션 기능 ngAnimate와 스와이프 제스처 감지 기능 ngTouch에 대해 설명한다.
** 권고
애니메이션은 은은하고 간결하며 짧아야 한다. 사용자의 관심을 유도하는데 있기 때문에 남용하지 말아야 한다.
ngAnimate를 지원하는 내장 디렉티브 및 애니메이션 이벤트
- ng-repeat: enter, leave, move
- ng-view/ ng-include/ ng-switch/ ng-if: enter, leave
- ng-class/ ng-show/ ng-hide: add, remove
ngTouch는 터치 디바이스 지원을 위한 모듈이다.
이를 테스트 하기 위해서 크롬 브라우져의 개발자 도구를 이용한다.
** 크롬의 디바이스 모드 짱 좋다!
F12를 누르면 개발자 도구가 화면 하단에 뜨는데, 메뉴중 디바이스 아이콘을 클릭하면 디바이스 모드가 활성화 되고, 디바이스 타입별로 선택하여 테스트 할 수 있다.
이에 대한 코드는 다음과 같다.
1) /ch23/products.html
<!DOCTYPE html> <html ng-app="exampleApp"> <head> <title>Ch23. 애니메이션 - ProAngularJS</title> <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" /> <a href="/node_modules/angular/angular.js">/node_modules/angular/angular.js</a> <a href="/node_modules/angular/angular-resource.js">/node_modules/angular/angular-resource.js</a> <a href="/node_modules/angular/angular-route.js">/node_modules/angular/angular-route.js</a> <a href="/node_modules/angular/angular-animate.js">/node_modules/angular/angular-animate.js</a> <a href="/node_modules/angular/angular-touch.js">/node_modules/angular/angular-touch.js</a> <base href="/ch23/"> <a href="http://products.js">http://products.js</a> <style type="text/css"> /* .ngFade라는 클래스 명을 주목할 것. class="<클래스명>"에 이용됨 ==> 애니메이션 이벤트에는 enter, leave, move 등이 있고 지원하는 내장 디렉티브들에서 가능하다 */ .ngFade.ng-enter { transition: 0.1s linear all; opacity: 0; } .ngFade.ng-enter-active { opacity: 1; } /* <문제> leave 이벤트까지 적용하니 두 뷰가 한꺼번에 보인다. DOM에서 추가하고 제거하는 과정탓 ==> enter만을 이용해 새로 들어오는 뷰에만 적용하는 것이 낫다. 예제의 의도상 일부러 주석 처리 안하고 남겨둔다 */ .ngFade.ng-leave { transition: 0.1s linear all; opacity: 0; } .ngFade.ng-leave-active { opacity: 1; } </style> </head> <body ng-controller="defaultCtrl"> <div class="panel panel-default"> <div class="panel-body"> <div class="well"> <h4>Swipe Here!</h4> </div> <div>Swipe was: {{ swipeType }}</div> </div> </div> <div class="panel panel-default"> <h3 class="panel-heading">Products</h3> <div class="ngFade"></div> </div> </body> </html>
2) /ch23/products.js
angular.module( "exampleApp", [ "ngResource", "ngRoute", "ngAnimate", "ngTouch"]) // ... 생략 ... // .controller("defaultCtrl", function( $scope, $location, productsResource) { // ... 생략 ... // // ngTouch 관련 예제 코드 $scope.swipeType = "<None>"; $scope.handleSwipe = function( direction) { $scope.swipeType = direction; } // ... 생략 ... // });