#실행결과 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;
}
// ... 생략 ... //
});
