Το AngularJS είναι ένα υπερηχητικό πλαίσιο JavaScript που καθιστά τη δημιουργία μιας σελίδας εφαρμογών (SPA) πολύ εύκολη. Πάνω από αυτό το AngularJS έρχεται με μια χούφτα γωνιακών ενοτήτων που μπορούν να χρησιμοποιηθούν για να δημιουργήσουν μια φοβερή εμπειρία χρήστη. Σε αυτήν την ανάρτηση θα δούμε πώς να χρησιμοποιούμε το δημοφιλές ngAnimate για να προσθέσουμε μεταβάσεις σελίδας / κινούμενα σχέδια σε γωνιακές προβολές.
Το ngAnimate μπορεί να χρησιμοποιηθεί με διάφορες οδηγίες όπως ngRepeat, ngView, ngInclude, ngIf, ngMessage κ.λπ.
Σε αυτήν την ανάρτηση θα χρησιμοποιήσουμε κινούμενες εικόνες με ngView
Εδώ χρησιμοποιούμε αγκύλες IDE από την Adobe, αλλά είστε ελεύθεροι να χρησιμοποιήσετε άλλους, για παράδειγμα, Sublime Text, WebStorm από το JetBrains κ.λπ.
Σημείωση : Θα χρησιμοποιήσουμε επίσης το Bootswatch Bootstrap API για να δώσουμε στις σελίδες HTML μας μια όμορφη εμφάνιση
Δομή έργου:
Παρακάτω είναι η δομή του έργου σε αγκύλες IDE
μάθετε pl sql online δωρεάν
Ακολουθεί η σύντομη περιγραφή κάθε αρχείου που χρησιμοποιείται στο έργο
animation.css - κύριο αρχείο CSS όπου καθορίζουμε τις κινούμενες εικόνες σελίδας μας
bootstrap.min.css - bootswatch bootstrap για να μας δώσει επισημαίνει μια όμορφη εμφάνιση
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, ορίζουμε τη γωνιακή ενότητα μαζί με τις διαδρομές και τους ελεγκτές.
Το module transption app έχει δύο εξαρτήσεις: ngAnimate και ngRoute
var transactionApp = angular.module ('TransactionApp', ['ngAnimate', 'ngRoute']) transienApp.config (function ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html') , ελεγκτής: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3). html ', ελεγκτής:' view3Controller '})}) transienApp.controller (' view1Controller ', function ($ lingkup) {$ lingkop.cssClass =' view1 '}) transienApp.controller (' view2Controller ', function ($ εύρος) { $ lingkop.cssClass = 'view2'}) transienApp.controller ('view3Controller', function ($ εύρος) {$ lingkup.cssClass = 'view3'})Έχουμε ορίσει τρεις τμηματικές προβολές (view1, view2, view3) οι οποίες θα εισαχθούν στο κέλυφος ανάλογα με τη διεύθυνση URL. Οι αντίστοιχοι ελεγκτές ορίζουν ένα χαρακτηριστικό 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 σύμφωνα με τη διεύθυνση URL που έχουμε ορίσει στο αρχείο config.js
Καθορισμός στυλ και κινούμενων σχεδίων:
Ας βάλουμε λίγο ζωή στις απόψεις μας εφαρμόζοντας 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 { χρώμα: # 333 θέση: απόλυτη ευθυγράμμιση κειμένου: κεντρική κορυφή: πλάτος 50 εικονοστοιχείων: 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
.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 {from {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: easy- 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: easy-out} 40% {-moz-μετασχηματισμός: 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: easy-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) περιστροφήZ (17deg)}}Περιστρέψτε την εφημερίδα Animation
/ * rotate out news * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {σε {-moz-transform: translateZ (-3000px) rotateZ (360deg) αδιαφάνεια: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}Εφαρμογή κινούμενων σχεδίων:
Ήρθε η ώρα να εφαρμόσετε τις κινούμενες εικόνες που είχαμε ορίσει προηγουμένως
Προβολή 1 κινούμενων σχεδίων
/ * Προβάλετε 1 κινούμενα σχέδια για άδεια σελίδας και εισαγάγετε * / .view1.ng-Leave {-webkit-animation: slideOutLeft 0.5s και τα δύο animation easy-in -moz-animation: slideOutLeft 0.5s και τα δύο εύκολα: slideOutLeft 0.5s και τα δύο ευκολία -in} .view1.ng-enter {-webkit-animation: scaleUp 0,5s και οι δύο easy-in -moz-animation: scaleUp 0,5s και οι δύο easy-in animation: scaleUp 0,5s και οι δύο ευκολίαΠροβολή 2 κινούμενων σχεδίων
/ * Προβολή 2 κινούμενων εικόνων για άδεια σελίδας και εισαγάγετε * / .view2.ng-Leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s και τα δύο easy-in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s και οι δύο-easy-in transform-origin: 0% 0% animation: rotateFall 1s two easy-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s και οι δύο ευκολία - moz-animation: slideInRight 0,5s και οι δύο ευκολία στην κίνηση: slideInRight 0,5s και οι δύο easy-in}Προβολή 3 κινούμενων σχεδίων
/ * Προβολή 3 κινούμενων εικόνων για άδεια σελίδας και πληκτρολογήστε * / .view3.ng-Leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s και τα δύο easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s two easy-in transform-origin: 50% 50% animation: rotateOutNewspaper .5s two easy-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s και οι δύο ευκολία -in -moz-animation: slideInUp 0.5s και τα δύο animation-easy: slideInUp 0.5s και τα δύο easy-in}Έχουμε τελειώσει με όλες τις αλλαγές. Τώρα ήρθε η ώρα να εκτελέσετε την εφαρμογή
Εκτέλεση της εφαρμογής
Κατά την εκτέλεση της εφαρμογής, θα εμφανιστεί η παρακάτω σελίδα:
Κάντε κλικ στους συνδέσμους και θα δείτε κινούμενα σχέδια στο παιχνίδι, κατά την είσοδο και την έξοδο από τις μερικές σελίδες.
Υπάρχουν διάφορες άλλες κινούμενες εικόνες που μπορούν να χρησιμοποιηθούν. Επίσης, ένα συντριπτικό σύνολο πιθανών εφέ μπορεί να είναι εδώ: http://tympanus.net/Development/PageTransitions/
Κατεβάστε τον κωδικό και δοκιμάστε τον εαυτό σας
πώς να ρυθμίσετε το classpath στο java
[buttonleads form_title = 'Λήψη κώδικα' redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = 'Λήψη κώδικα']
Ελπίζω να σας άρεσε το παραπάνω Animation με το ngAnimate blog. Εάν επιθυμείτε να εμβαθύνετε στο Angular JS, θα σας συνιστούσα γιατί να μην ρίξετε μια ματιά στο δικό μας σελίδα μαθημάτων. Η εκπαίδευση Angular JS Certification στο Edureka θα σας κάνει έναν ειδικό στο Angular JS μέσω ζωντανών εκπαιδευτικών συνεδριών και πρακτικής εκπαίδευσης χρησιμοποιώντας πραγματικές περιπτώσεις χρήσης.
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων και θα επικοινωνήσουμε μαζί σας.
Σχετικές αναρτήσεις:
Ανάλυση αρχείων XML χρησιμοποιώντας SAX Parser