AngularJS היא מסגרת JavaScript גיבורת-על אשר מקלה מאוד על יצירת יישומי עמודים בודדים (SPA). נוסף על כך AngularJS מגיע עם קומץ מודולים זוויתיים שניתן להשתמש בהם כדי ליצור חווית משתמש מדהימה. בפוסט זה אנו הולכים לראות כיצד להשתמש ב- ngAnimate פופולריים כדי להוסיף מעברים / אנימציות לדפים לתצוגות זוויתיות.
ניתן להשתמש ב- ngAnimate עם הוראות שונות כמו ngRepeat, ngView, ngInclude, ngIf, ngMessage וכו '.
בפוסט זה נשתמש באנימציות עם ngView
כאן אנו משתמשים בסוגריים IDE מבית Adobe, אך אתה רשאי להשתמש באחרים, למשל, טקסט נשגב, WebStorm מ- JetBrains וכו '.
הערה : אנו נשתמש גם ב- Bootswatch Bootstrap API בכדי לתת לדפי ה- HTML שלנו מראה יפה
מבנה הפרויקט:
להלן מבנה הפרויקט ב- Brackets IDE
הנה התיאור הקצר של כל קובץ המשמש בפרויקט
animation.css - קובץ CSS ראשי בו אנו מגדירים את הנפשות העמודים שלנו
bootstrap.min.css - מגף מגפיים של שעון מגפיים למתן את שלנו מתייג מראה יפה
config.js - קובץ JavaScript ראשי שבו אנו מגדירים את המודול הזוויתי שלנו יחד עם מסלולים ובקרים
shellPage.html - זהו דף הפגז בו תצפיות אחרות נטענו באופן דינמי
view1.html, view2.html, view3.html - אלה התצוגות החלקיות שיועמסו על shellPage
כיצד מיישמים אנימציות:
ngAnimate מחילה שיעורי CSS על הוראות הזווית שונות, תלוי אם הם נכנסים לתצוגה או עוזבים אותה
.ng-enter - מחלקת CSS זו חלה על ההנחיה בכל פעם שהיא נטענת בדף
.ng- לעזוב - שיעור CSS זה חל על ההנחיה בכל פעם שהוא עוזב את הדף
בואו נעבור על כל קובץ אחד אחד
shellPage.html
עומס יתר על הפונקציה c ++
shellPage טוען את המשאבים הנדרשים, מחיל יישום ng על גוף ומוסיף ng-view כדי להזרים את התצוגות באופן דינמי.
config.js
בקובץ התצורה אנו מגדירים את המודול הזוויתי שלנו יחד עם מסלולים ובקרים.
למעבר למודול יש שתי תלות: ngAnimate ו- ngRoute
var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (פונקציה ($ 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 ', פונקציה ($ scope) {$ scope.cssClass =' view1 '}) transitionApp.controller (' view2Controller ', פונקציה ($ scope) { $ scope.cssClass = 'view2'}) מעברApp.controller ('view3Controller', פונקציה ($ scope) {$ scope.cssClass = 'view3'})הגדרנו שלוש תצוגות חלקיות (view1, view2, view3) שיוחדרו לדף הפגז בהתאם לכתובת האתר. בקרים נבחרים מגדירים תכונה cssClass, שהיא השם של מחלקת CSS, שתוחל על תצוגת ng. נגדיר את האנימציות שלנו בשיעורי 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 בהתאם לכתובת האתר שהגדרנו בקובץ config.js
הגדרת סגנונות ואנימציות:
בואו נשים חיים בהשקפותינו על ידי החלת CSS עליו
ג 'אווה בכוחו של
.view {למטה: 0 ריפוד למעלה: מיקום 200 פיקסלים: יישור טקסט מוחלט: מרכז עליון: 0 רוחב: 100%}. צפה ב- {margin-top: 50 px}. view h1 {font-size: 60px} # heading { צבע: מיקום # 333: יישור טקסט מוחלט: החלק העליון של המרכז: רוחב 50 פיקסלים: 100%} / * צבעי רקע וטקסט לדפי תצוגה חלקית (תצוגה 1, תצוגה 2, תצוגה 3) ------------- ------------------------------------------------ * / .view1 {רקע: # bef2de צבע: # 00907c} .view2 {רקע: # D4D0EA צבע: # 55316f} .view3 {רקע: # FFCBA4 צבע: rgba (149, 95, 40, 0.91)}כדי לבצע מעבר נקי בין תצוגות שונות, נגדיר את המאפיין CS-z-index
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}עכשיו הגיע הזמן להגדיר את האנימציות שלנו
החלק אנימציה שמאלה
/ * החלק שמאלה * / @ keyframes slideOutLeft {ל {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {ל {-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- keyframes 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 {מ- {-moz-transform: translateY (100 %)} ל- {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {מ- {-webkit-transform: translateY (100%)} ל- {-webkit-transform: translateY (0)}}אנימציית סיבוב ונפילה
/ * לסובב וליפול * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: ease- out} 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)}}סובב את האנימציה בעיתון
/ * סובב את העיתון * / @ -webkit-keyframes rotateOutNewspaper {ל- {-webkit-transform: translateZ (-3000px) rotateZ (360deg) אטימות: 0}} @ -moz-keyframes rotateOutNewspaper {ל- {-moz-transform: translateZ (-3000 פיקסלים) אטימות rotateZ (360deg): 0}} @keyframes rotateOutNewspaper {ל- {transform: translateZ (-3000px) rotateZ (360deg) אטימות: 0}}החלת אנימציות:
הגיע הזמן ליישם את האנימציות שהגדרנו קודם
צפה 1 אנימציות
/ * צפה באנימציות 1 לעזיבת עמוד והזן * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s גם להקל על -moz-animation: slideOutLeft 0.5s גם אנימציה ב- easy-in: slideOutLeft 0.5 שניהם להקל -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s both ease-in -moz-animation: scaleUp 0.5s both easy-in animation: scaleUp 0.5s both ease-in}צפו ב -2 אנימציות
/ * צפה ב -2 אנימציות עבור עזיבת עמוד והזן * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotate נפילה 1 הן קלות -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s שניהם קלים בהפכת מקור: 0% 0% animation: rotateFall 1s both-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s both eas-in - moz-animation: slideInRight 0.5s גם להקל על אנימציה: slideInRight 0.5s גם להקל על}צפה ב -3 אנימציות
/ * צפה ב -3 אנימציות לעזיבת עמוד והזן * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s שניהם מקלים ב- -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s שניהם מקלים על טרנספורמציה מקור: 50% 50% אנימציה: rotateOutNewspaper .5s שניהם קלים} .view3.ng-enter {-webkit-animation: slideInUp 0.5s both -in -moz-animation: slideInUp 0.5s שניהם הקלות ב- animation: slideInUp 0.5s שניהם קלות ב-}סיימנו עם כל השינויים. עכשיו הגיע הזמן להריץ את היישום
הפעלת האפליקציה
בהפעלת היישום יופיע בפניך הדף שלהלן:
לחץ על הקישורים ותראה אנימציות בהפעלה, בכניסה ולעזיבה של הדפים החלקיים.
ישנן הנפשות שונות בהן ניתן להשתמש. כמו כן, סט מכריע של השפעות אפשריות יכול להיות כאן: 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. אם ברצונך לצלול עמוק לתוך JS Angular, אני ממליץ לך למה שלא תסתכל על שלנו דף קורס. אימון ההסמכה של Angular JS באדוריקה יהפוך אותך למומחה ב- Angular JS באמצעות מפגשים חיים של מדריכים חיים והכשרה מעשית באמצעות מקרי שימוש אמיתיים.
יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות ונחזור אליך.
פוסטים קשורים:
ניתוח קבצי XML באמצעות SAX Parser