AngularJS는 단일 페이지 애플리케이션 (SPA)을 매우 쉽게 생성 할 수있는 슈퍼 히어로 자바 스크립트 프레임 워크입니다. 그 위에 AngularJS에는 멋진 사용자 경험을 만드는 데 사용할 수있는 몇 가지 각도 모듈이 함께 제공됩니다. 이 게시물에서는 인기있는 ngAnimate를 사용하여 각도보기에 페이지 전환 / 애니메이션을 추가하는 방법을 살펴 보겠습니다.
ngAnimate는 ngRepeat, ngView, ngInclude, ngIf, ngMessage 등과 같은 다양한 지시문과 함께 사용할 수 있습니다.
이 게시물에서는 ngView와 함께 애니메이션을 사용합니다.
여기에서는 Adobe의 Brackets IDE를 사용하고 있지만 Sublime Text, JetBrains의 WebStorm 등과 같은 다른 것을 자유롭게 사용할 수 있습니다.
노트 : 또한 Bootswatch Bootstrap API를 사용하여 HTML 페이지를 아름답게 보이게 할 것입니다.
자바 system.exit (0)
프로젝트 구조 :
아래는 Brackets IDE의 프로젝트 구조입니다.
다음은 프로젝트에 사용 된 각 파일에 대한 간단한 설명입니다.
animation.css – 페이지 애니메이션을 정의하는 기본 CSS 파일
bootstrap.min.css – 우리에게주는 부트 워치 부트 스트랩 아름다운 모습을 태그
config.js – 경로 및 컨트롤러와 함께 각도 모듈을 정의하는 기본 JavaScript 파일
shellPage.html – 다른 뷰가 동적으로로드되는 쉘 페이지입니다.
view1.html, view2.html, view3.html – 이것은 shellPage에로드 될 부분보기입니다.
애니메이션 적용 방법 :
ngAnimate는 뷰에 들어가는 지 나가는 지에 따라 다른 Angular 지시문에 CSS 클래스를 적용합니다.
.ng-enter –이 CSS 클래스는 페이지에로드 될 때마다 지시문에 적용됩니다.
.ng-leave –이 CSS 클래스는 페이지를 떠날 때마다 지시문에 적용됩니다.
각 파일을 하나씩 살펴 보겠습니다.
shellPage.html
shellPage는 필요한 리소스를로드하고 ng-app을 본문에 적용하고 ng-view를 추가하여 뷰를 동적으로 삽입합니다.
config.js
구성 파일에서 라우트 및 컨트롤러와 함께 각도 모듈을 정의합니다.
모듈 transitionApp에는 ngAnimate 및 ngRoute의 두 가지 종속성이 있습니다.
var transitionApp = angular.module ( 'transitionApp', [ 'ngAnimate', 'ngRoute']) transitionApp.config (function ($ routeProvider) {$ routeProvider .when ( '/', {templateUrl : 'partials / view1.html' , 컨트롤러 : 'view1Controller'}) .when ( '/ view2', {templateUrl : 'partials / view2.html', 컨트롤러 : 'view2Controller'}) .when ( '/ view3', {templateUrl : 'partials / view3. html ', 컨트롤러 :'view3Controller '})}) transitionApp.controller ('view1Controller ', function ($ scope) {$ scope.cssClass ='view1 '}) transitionApp.controller ('view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) transitionApp.controller ( 'view3Controller', function ($ scope) {$ scope.cssClass = 'view3'})URL에 따라 쉘 페이지에 삽입 될 세 개의 부분보기 (view1, view2, view3)를 정의했습니다. 각 컨트롤러는 ng-view에 적용될 CSS 클래스의 이름 인 cssClass 속성을 설정합니다. 다른 애니메이션으로 각 페이지를로드하는 이러한 CSS 클래스에서 애니메이션을 정의합니다.
부분 페이지 view1.html, view2.html, view3.html
부분 페이지에는 별다른 것이 없으며 일부 텍스트와 다른보기에 대한 링크 만 있습니다.
view1.html
이것은보기 1입니다.
보기 2 보기 3
view2.html
보기 2입니다.
보기 1 보기 3
view3.html
이것은 View 3입니다.
보기 1 보기 2
이 세 개의 HTML 파일은 config.js 파일에서 정의한 URL에 따라 shellPage.html에 삽입되는 부분 페이지입니다.
스타일 및 애니메이션 정의 :
CSS를 적용하여 뷰에 생명을 불어 넣어 보겠습니다.
.view {bottom : 0 padding-top : 200px position : absolute text-align : center top : 0 width : 100 %} .view a {margin-top : 50px} .view h1 {font-size : 60px} #heading { color : # 333 position : absolute text-align : center top : 50px width : 100 %} / * 부분보기 페이지의 배경 및 텍스트 색상 (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {background : # bef2de color : # 00907c} .view2 {background : # D4D0EA color : # 55316f} .view3 {background : # FFCBA4 color : rgba (149, 95, 40, 0.91)}서로 다른보기간에 깔끔하게 전환하기 위해 CSS z-index 속성을 설정합니다.
.view.ng-leave {z-index : 9999} .view.ng-enter {z-index : 8888}이제 애니메이션을 정의 할 시간입니다.
왼쪽으로 슬라이드 애니메이션
/ * 슬라이드 아웃 왼쪽 * / @keyframes slideOutLeft {to {transform : translateX (-100 %)}} @ -moz-keyframes slideOutLeft {to {-moz-transform : translateX (-100 %)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform : translateX (-100 %)}}스케일 업 애니메이션
/ * scale up * / @keyframes scaleUp {from {opacity : 0.3 transform : scale (0.8)}} @ -moz-keyframes scaleUp {from {opacity : 0.3 -moz-transform : scale (0.8)}} @ -webkit- keyframes scaleUp {from {opacity : 0.3 -webkit-transform : scale (0.8)}}오른쪽 애니메이션에서 슬라이드 인
바이너리를 정수 자바로 변환
/ * 오른쪽에서 슬라이드 * / @keyframes slideInRight {from {transform : translateX (100 %)} to {transform : translateX (0)}} @ -moz-keyframes slideInRight {from {-moz-transform : translateX (100) %)} to {-moz-transform : translateX (0)}} @ -webkit-keyframes slideInRight {from {-webkit-transform : translateX (100 %)} to {-webkit-transform : translateX (0)}}하단 애니메이션에서 슬라이드 인
/ * 아래에서 슬라이드 * / @keyframes slideInUp {from {transform : translateY (100 %)} to {transform : translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform : translateY (100) %)} to {-moz-transform : translateY (0)}} @ -webkit-keyframes slideInUp {from {-webkit-transform : translateY (100 %)} to {-webkit-transform : translateY (0)}}회전 및 가을 애니메이션
/ * rotate and fall * / @ -webkit-keyframes rotateFall {0 % {-webkit-transform : rotateZ (0deg)} 20 % {-webkit-transform : rotateZ (10deg) -webkit-animation-timing-function : ease- 출력} 40 % {-webkit-transform : rotateZ (17deg)} 60 % {-webkit-transform : rotateZ (16deg)} 100 % {-webkit-transform : translateY (100 %) rotateZ (17deg)}} @ -moz -keyframes rotateFall {0 % {-moz-transform : rotateZ (0deg)} 20 % {-moz-transform : rotateZ (10deg) -moz-animation-timing-function : ease-out} 40 % {-moz-transform : rotateZ (17deg)} 60 % {-moz-transform : rotateZ (16deg)} 100 % {-moz-transform : translateY (100 %) rotateZ (17deg)}} @keyframes rotateFall {0 % {transform : rotateZ (0deg) } 20 % {transform : rotateZ (10deg) animation-timing-function : ease-out} 40 % {transform : rotateZ (17deg)} 60 % {transform : rotateZ (16deg)} 100 % {transform : translateY (100 %) rotateZ (17deg)}}신문 애니메이션 회전
/ * rotate out news * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform : translateZ (-3000px) rotateZ (360deg) opacity : 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform : translateZ (-3000px) rotateZ (360deg) opacity : 0}} @keyframes rotateOutNewspaper {to {transform : translateZ (-3000px) rotateZ (360deg) opacity : 0}}애니메이션 적용 :
이전에 정의한 애니메이션을 적용 할 시간입니다.
애니메이션 1 개보기
/ * 페이지 나가기에 대한 애니메이션 1 개보기 및 입력 * / .view1.ng-leave {-webkit-animation : slideOutLeft 0.5s 둘 다 ease-in -moz-animation : slideOutLeft 0.5s 둘 다 easy-in 애니메이션 : slideOutLeft 0.5s 둘 다 ease -in} .view1.ng-enter {-webkit-animation : scaleUp 0.5s 둘 다 ease-in -moz-animation : scaleUp 0.5s 둘 다 ease-in 애니메이션 : scaleUp 0.5s 둘 다 ease-in}애니메이션 2 개보기
/ * 페이지 나가기에 대한 애니메이션 2 개를보고 입력 * / .view2.ng-leave {-webkit-transform-origin : 0 % 0 % -webkit-animation : rotateFall 1s 둘 다 ease-in -moz-transform-origin : 0 % 0 % -moz-animation : rotateFall 1s 둘 다 ease-in transform-origin : 0 % 0 % animation : rotateFall 1s 둘 다 ease-in} .view2.ng-enter {-webkit-animation : slideInRight 0.5s 둘 다 ease-in- moz-animation : slideInRight 0.5s 둘 다 ease-in 애니메이션 : slideInRight 0.5s 둘 다 ease-in}애니메이션 3 개보기
/ * 페이지 나가기에 대한 애니메이션 3 개보기 및 입력 * / .view3.ng-leave {-webkit-transform-origin : 50 % 50 % -webkit-animation : rotateOutNewspaper .5s 둘 다 ease-in -moz-transform-origin : 50 % 50 % -moz-animation : rotateOutNewspaper .5s 둘 다 ease-in transform-origin : 50 % 50 % animation : rotateOutNewspaper .5s 둘 다 ease-in} .view3.ng-enter {-webkit-animation : slideInUp 0.5s 둘 다 여유 -in -moz-animation : slideInUp 0.5s 둘 다 ease-in 애니메이션 : slideInUp 0.5s 둘 다 ease-in}모든 변경 사항이 완료되었습니다. 이제 애플리케이션을 실행할 시간입니다.
응용 프로그램 실행
응용 프로그램을 실행하면 아래 페이지가 표시됩니다.
링크를 클릭하면 부분 페이지에 들어가고 나갈 때 애니메이션이 재생되는 것을 볼 수 있습니다.
다른 다양한 애니메이션을 사용할 수 있습니다. 또한 가능한 효과의 압도적 세트가 여기에있을 수 있습니다. http://tympanus.net/Development/PageTransitions/
코드를 다운로드하여 직접 사용해보십시오.
[buttonleads form_title =”코드 다운로드”redirect_url = https : //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text =”코드 다운로드”]
ngAnimate 블로그에서 위의 애니메이션이 마음에 드셨기를 바랍니다. Angular JS에 대해 자세히 알아보고 싶다면 코스 페이지. Edureka의 Angular JS 인증 교육은 실제 사용 사례를 사용한 강사 주도 세션 및 실습 교육을 통해 Angular JS의 전문가가 될 것입니다.
질문이 있으십니까? 의견란에 언급 해 주시면 연락 드리겠습니다.
관련 게시물: