> 웹 프론트엔드 > JS 튜토리얼 > AngularJS_AngularJS를 사용하여 확장 가능한 페이지 전환을 구현하는 방법

AngularJS_AngularJS를 사용하여 확장 가능한 페이지 전환을 구현하는 방법

WBOY
풀어 주다: 2016-05-16 15:53:41
원래의
1143명이 탐색했습니다.

AngularJS 1.2를 사용하면 순수 CSS 클래스 기반 전환 및 애니메이션을 도입하여 단일 페이지 애플리케이션에서 페이지 간 전환을 더 쉽게 만들 수 있습니다. ng-view를 사용하여 다양한 전환을 도입하고 각 페이지가 들어오고 나가는 방식을 도입하는 확장 가능한 접근 방식을 살펴보겠습니다.

데모: http://embed.plnkr.co/PqhvmW/preview

먼저 태그:

 <div class="page-container">
  <div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
 </div>

로그인 후 복사
ng-view는 들어가기/나가기 애니메이션을 사용하므로 DOM에서 두 개의 ng-view 요소를 사용하여 새 보기로 전환하고 이전 보기로 전환할 수 있습니다. 따라서 우리는 절대 위치 지정을 사용하여 상대 위치 지정을 사용하는 페이지 컨테이너 요소에 ng-view를 설정함으로써 모든 종류의 위치 지정 전환을 지원합니다.

'가' 방법

단일 페이지 애플리케이션에서 우리는 여전히 URL을 통한 탐색을 활성화하고 브라우저의 뒤로 및 다음 버튼이 예상대로 작동하는지 확인하려고 합니다. 따라서 $routeProvider에서 경로, 템플릿 및 컨트롤러(선택적 구문 분석)를 설정하면 ng-click에서 상대 경로를 사용하여 페이지를 직접 전환할 수 있습니다.

 <a ng-click="/page2">Go to page 2</a>
로그인 후 복사

그것도 작동하지만 ng-view에서 클래스 스위치를 하드코딩해야 합니다. 대신 $rootScope에 다음과 같이 경로와 토글을 지정할 수 있는 'go' 메소드를 만들어 보겠습니다.

 <a ng-click="go('/page2', 'slideLeft')">Go to page 2</a>
로그인 후 복사

$rootScope 'go' 메소드는 다음과 같습니다.

$rootScope.go = function (path, pageAnimationClass) {
 
  if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
    $rootScope.pageAnimationClass = 'crossFade';
  }
     
  else { // Use the specified animation
    $rootScope.pageAnimationClass = pageAnimationClass;
  }
 
  if (path === 'back') { // Allow a 'back' keyword to go to previous page
    $window.history.back();
  }
     
  else { // Go to the specified path
    $location.path(path);
  }
};
로그인 후 복사

이제 두 번째 매개변수로 지정한 토글 클래스가 ng-view에 추가되고 go 메소드는 지정된 첫 번째 매개변수로 페이지 경로를 변경합니다.

수업 전환

다음으로 할 일은 원하는 만큼의 토글 클래스를 만들고 ngAnimate 모듈에서 제공하는 후크를 사용하는 것입니다. 예를 들면 다음과 같습니다.

/* slideLeft */
.slideLeft {
  transition-timing-function: ease;
  transition-duration: 250ms;
}
 
.slideLeft.ng-enter {
  transition-property: none;
  transform: translate3d(100%,0,0);
}
 
.slideLeft.ng-enter.ng-enter-active {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave.ng-leave-active {
  transition-property: all;
  transform: translate3d(-100%,0,0);
}
로그인 후 복사


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿