AngularJS เป็นเฟรมเวิร์ก JavaScript ที่ยอดเยี่ยมซึ่งทำให้การสร้าง Single Page Applications (SPA) เป็นเรื่องง่ายมาก ด้านบนของ AngularJS นั้นมาพร้อมกับโมดูลเชิงมุมจำนวนหนึ่งที่สามารถใช้เพื่อสร้างประสบการณ์การใช้งานที่ยอดเยี่ยมแก่ผู้ใช้ ในโพสต์นี้เราจะมาดูวิธีใช้ ngAnimate ยอดนิยมเพื่อเพิ่มการเปลี่ยนหน้า / ภาพเคลื่อนไหวไปยังมุมมองเชิงมุม
สามารถใช้ ngAnimate กับคำสั่งต่างๆเช่น ngRepeat, ngView, ngInclude, ngIf, ngMessage เป็นต้น
ในโพสต์นี้เราจะใช้ภาพเคลื่อนไหวกับ ngView
ที่นี่เราใช้ Brackets IDE จาก Adobe แต่คุณมีอิสระที่จะใช้อื่น ๆ เช่น Sublime Text, WebStorm จาก JetBrains เป็นต้น
บันทึก : นอกจากนี้เรายังจะใช้ Bootswatch Bootstrap API เพื่อทำให้หน้า HTML ของเราดูสวยงาม
โครงสร้างโครงการ:
ด้านล่างนี้คือโครงสร้างโครงการใน Brackets IDE
นี่คือคำอธิบายสั้น ๆ ของแต่ละไฟล์ที่ใช้ในโครงการ
animation.css - ไฟล์ CSS หลักที่เรากำหนดภาพเคลื่อนไหวของหน้า
bootstrap.min.css - bootstrap bootswatch สำหรับการให้ของเรา แท็กรูปลักษณ์ที่สวยงาม
config.js - ไฟล์ JavaScript หลักที่เรากำหนดโมดูลเชิงมุมของเราพร้อมกับเส้นทางและตัวควบคุม
shellPage.html - นี่คือหน้าเชลล์ที่จะโหลดมุมมองอื่น ๆ แบบไดนามิก
view1.html, view2.html, view3.html - นี่คือมุมมองบางส่วนที่จะโหลดลงใน shellPage
ภาพเคลื่อนไหวถูกนำไปใช้อย่างไร:
ngAnimate ใช้คลาส CSS กับคำสั่งเชิงมุมที่แตกต่างกันขึ้นอยู่กับว่าพวกเขากำลังเข้าหรือออกจากมุมมอง
.ng-enter - คลาส CSS นี้ใช้กับคำสั่งทุกครั้งที่โหลดในเพจ
.ng- ลา - คลาส CSS นี้ใช้กับคำสั่งทุกครั้งที่ออกจากหน้า
มาดูทีละไฟล์กัน
shellPage.html
shellPage โหลดทรัพยากรที่จำเป็นใช้ ng-app กับร่างกายและเพิ่ม ng-view เพื่อแทรกมุมมองแบบไดนามิก
config.js
ในไฟล์ config เรากำหนดโมดูลเชิงมุมของเราพร้อมกับเส้นทางและตัวควบคุม
แอพเปลี่ยนโมดูลมีการอ้างอิงสองแบบ: ngAnimate และ ngRoute
var TransitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (ฟังก์ชัน ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , คอนโทรลเลอร์: 'view1Controller'}) เมื่อ ('/ view2', {templateUrl: 'partials / view2.html', ตัวควบคุม: 'view2Controller'}) เมื่อ ('/ view3', {templateUrl: 'partials / view3. html ', controller:' 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'})เราได้กำหนดมุมมองบางส่วนไว้สามมุมมอง (view1, view2, view3) ซึ่งจะถูกแทรกลงในเชลล์เพจโดยขึ้นอยู่กับ URL Respective Controllers ตั้งค่าแอตทริบิวต์ cssClass ซึ่งเป็นชื่อของคลาส CSS ซึ่งจะนำไปใช้กับ ng-view เราจะกำหนดภาพเคลื่อนไหวของเราในคลาส CSS เหล่านี้ซึ่งจะโหลดแต่ละหน้าด้วยภาพเคลื่อนไหวที่แตกต่างกัน
หน้าบางส่วน view1.html, view2.html, view3.html
ไม่มีอะไรมากในหน้าบางส่วนมีเพียงข้อความบางส่วนและลิงก์ไปยังมุมมองอื่น ๆ
view1.html
นี่คือมุมมอง 1
ดู 2 ดู 3
view2.html
นี่คือมุมมอง 2
ดู 1 ดู 3
view3.html
นี่คือมุมมอง 3
ดู 1 ดู 2
โปรดจำไว้ว่าไฟล์ HTML ทั้งสามนี้เป็นเพจบางส่วนซึ่งจะถูกแทรกลงใน shellPage.html ตาม URL ที่เรากำหนดไว้ในไฟล์ config.js
การกำหนดรูปแบบและภาพเคลื่อนไหว:
มาเติมชีวิตชีวาให้กับมุมมองของเราด้วยการใช้ CSS กับมัน
วิธีใช้ iterator java
.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 { สี: # 333 ตำแหน่ง: จัดข้อความแบบสัมบูรณ์: ตรงกลางด้านบน: ความกว้าง 50px: 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 {เป็น {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {เป็น {-webkit-transform: translateX (-100%)}}ขยายภาพเคลื่อนไหว
/ * สเกลอัพ * / @keyframes scaleUp {จาก {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {from {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- คีย์เฟรม scaleUp {จาก {opacity: 0.3 -webkit-transform: scale (0.8)}}เลื่อนเข้าจากแอนิเมชั่นด้านขวา
/ * เลื่อนเข้าจากด้านขวา * / @keyframes slideInRight {จาก {transform: translateX (100%)} เป็น {transform: translateX (0)}} @ -moz-keyframes slideInRight {จาก {-moz-transform: translateX (100 %)} เป็น {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {จาก {-webkit-transform: translateX (100%)} เป็น {-webkit-transform: translateX (0)}}เลื่อนเข้าจากภาพเคลื่อนไหวด้านล่าง
/ * เลื่อนเข้าจากด้านล่าง * / @keyframes slideInUp {จาก {transform: translateY (100%)} เป็น {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform: translateY (100 %)} เป็น {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {จาก {-webkit-transform: translateY (100%)} เป็น {-webkit-transform: translateY (0)}}หมุนและตกภาพเคลื่อนไหว
/ * หมุนและตก * / @ -webkit-keyframes หมุน Fall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotationZ (10deg) -webkit-animation-timing-function: Easy- เอาต์} 40% {-webkit-transform: turnZ (17deg)} 60% {-webkit-transform: turnZ (16deg)} 100% {-webkit-transform: translateY (100%) rotationZ (17deg)}} @ -moz -keyframes rotationFall {0% {-moz-transform: rotationZ (0deg)} 20% {-moz-transform: rotationZ (10deg) -moz-animation-timing-function: Easy-out} 40% {-moz-transform: หมุน Z (17deg)} 60% {-moz-transform: turnZ (16deg)} 100% {-moz-transform: translateY (100%) rotationZ (17deg)}} @keyframes rotationFall {0% {transform: rotationZ (0deg) } 20% {transform: turnZ (10deg) animation-timing-function: easy-out} 40% {transform: turnZ (17deg)} 60% {transform: rotationZ (16deg)} 100% {transform: translateY (100%) หมุน Z (17deg)}}หมุนภาพเคลื่อนไหวของหนังสือพิมพ์
/ * หมุนหนังสือพิมพ์ * / @ -webkit-keyframes rotationOutNewspaper {เป็น {-webkit-transform: translateZ (-3000px) rotationZ (360deg) opacity: 0}} @ -moz-keyframes rotationOutNewspaper {to {-moz-transform: translateZ (-3000px) หมุน Z (360deg) ความทึบ: 0}} @keyframes rotationOutNewspaper {เป็น {transform: translateZ (-3000px) rotationZ (360deg) opacity: 0}}การใช้ภาพเคลื่อนไหว:
ถึงเวลาใช้ภาพเคลื่อนไหวที่เราได้กำหนดไว้ก่อนหน้านี้
ดู 1 ภาพเคลื่อนไหว
/ * ดูภาพเคลื่อนไหว 1 ภาพสำหรับการออกจากหน้าและป้อน * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s ทั้งความง่ายใน -moz-animation: slideOutLeft 0.5s ทั้งความง่ายในการเคลื่อนไหว: slideOutLeft 0.5s ทั้งความง่าย -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s ทั้งความง่ายใน -moz-animation: scaleUp 0.5s ทั้งความง่ายในการเคลื่อนไหว: scaleUp 0.5s ทั้งความง่ายใน}ดู 2 ภาพเคลื่อนไหว
/ * ดูภาพเคลื่อนไหว 2 ภาพสำหรับการเว้นหน้าและป้อน * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotationFall 1s ทั้งความง่ายใน -moz-transform-origin: 0% 0% -moz-animation: rotationFall 1s ทั้งความง่ายในการแปลงกำเนิด: 0% 0% แอนิเมชั่น: หมุนฟอล 1 ทั้งความง่ายใน} .view2.ng-enter {-webkit-animation: slideInRight 0.5s ทั้งความง่ายใน - moz-animation: slideInRight 0.5s ทั้งความง่ายในการเคลื่อนไหว: slideInRight 0.5s ทั้งความง่ายใน}ดู 3 ภาพเคลื่อนไหว
/ * ดูภาพเคลื่อนไหว 3 ภาพสำหรับการเว้นหน้าแล้วป้อน * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotationOutNewspaper .5s ทั้ง Easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotationOutNewspaper .5s ทั้ง Easy-in transform-origin: 50% ภาพเคลื่อนไหว 50%: rototNewspaper .5s ทั้งความง่ายใน} .view3.ng-enter {-webkit-animation: slideInUp 0.5s ทั้งความง่าย -in -moz-animation: slideInUp 0.5s ทั้งความง่ายในการเคลื่อนไหว: slideInUp 0.5s ทั้งความง่ายใน}เราดำเนินการกับการเปลี่ยนแปลงทั้งหมดแล้ว ตอนนี้ได้เวลาเรียกใช้แอปพลิเคชันแล้ว
เรียกใช้แอปพลิเคชัน
ในการเรียกใช้แอปพลิเคชันคุณจะเห็นหน้าด้านล่าง:
คลิกที่ลิงค์และคุณจะเห็นภาพเคลื่อนไหวในการเล่นในการเข้าและออกจากหน้าบางส่วน
มีแอนิเมชั่นอื่น ๆ อีกมากมายที่สามารถใช้ได้ นอกจากนี้ชุดเอฟเฟกต์ที่เป็นไปได้มากมายสามารถอยู่ที่นี่: http://tympanus.net/Development/PageTransitions/
ดาวน์โหลดโค้ดและลองใช้งานด้วยตัวเอง
[buttonleads form_title =” Download Code” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text =” Download Code”]
ฉันหวังว่าคุณจะชอบแอนิเมชั่นด้านบนกับบล็อก ngAnimate หากคุณต้องการเจาะลึก Angular JS ฉันขอแนะนำให้คุณว่าทำไมไม่ลองดูไฟล์ หน้าหลักสูตร การฝึกอบรม Angular JS Certification ที่ Edureka จะทำให้คุณเป็นผู้เชี่ยวชาญใน Angular JS ผ่านเซสชันนำผู้สอนแบบสดและการฝึกปฏิบัติจริงโดยใช้กรณีการใช้งานจริง
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นแล้วเราจะติดต่อกลับไป
กระทู้ที่เกี่ยวข้อง:
การแยกไฟล์ XML โดยใช้ SAX Parser