AngularJS este un cadru JavaScript supereroic care facilitează crearea aplicațiilor cu o singură pagină (SPA). În plus, AngularJS vine cu o mână de module unghiulare care pot fi utilizate pentru a crea o experiență de utilizator minunată. În acest post vom vedea cum să folosim popularul ngAnimate pentru a adăuga tranziții / animații de pagini la vizualizările unghiulare.
ngAnimate poate fi utilizat cu diverse directive precum ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.
În acest post vom folosi animații cu ngView
Aici folosim Brackets IDE de la Adobe, dar sunteți liber să utilizați altele, de exemplu, Sublime Text, WebStorm de la JetBrains etc.
Notă : Vom folosi, de asemenea, Bootswatch Bootstrap API pentru a oferi paginilor noastre HTML un aspect frumos
Structura proiectului:
Mai jos este structura proiectului în Brackets IDE
Iată scurta descriere a fiecărui fișier utilizat în proiect
animație.css - fișierul principal CSS în care ne definim animațiile de pagină
bootstrap.min.css - bootswatch bootstrap pentru oferirea noastră etichetează un aspect frumos
config.js - fișier JavaScript principal în care ne definim modulul unghiular împreună cu rutele și controlerele
shellPage.html - Aceasta este pagina shell în care alte vizualizări vor fi încărcate dinamic
view1.html, view2.html, view3.html - Acestea sunt vizualizările parțiale care vor fi încărcate în shellPage
Cum se aplică animațiile:
ngAnimate aplică clase CSS la diferite directive unghiulare, în funcție de intrarea sau ieșirea din vizualizare
.ng-enter - Această clasă CSS se aplică directivei ori de câte ori este încărcată în pagină
instrumente utilizate în analiza datelor mari
.ng-leave - Această clasă CSS se aplică directivei ori de câte ori iese din pagină
Să parcurgem fiecare fișier unul câte unul
shellPage.html
shellPage încarcă resursele necesare, aplică ng-app la corp și adaugă ng-view pentru a injecta dinamic vizualizările.
config.js
În fișierul de configurare, ne definim modulul unghiular împreună cu rutele și controlerele.
Modul de tranzițieApp are două dependențe: ngAnimate și ngRoute
var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (funcție ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , controller: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ 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', funcție ($ scope) {$ scope.cssClass = 'view3'})Am definit trei vizualizări parțiale (vizualizare1, vizualizare2, vizualizare3) care vor fi injectate în pagina de shell în funcție de adresa URL. Controlorii respectivi setează un atribut cssClass, care este numele clasei CSS, care va fi aplicat vizualizării ng. Vom defini animațiile noastre în aceste clase CSS care vor încărca fiecare pagină cu animații diferite.
Pagini parțiale view1.html, view2.html, view3.html
Nu există nimic mare în paginile parțiale, ci doar un text și un link către alte vizualizări
view1.html
Aceasta este vizualizarea 1
Vizualizarea 2 Vizualizarea 3
view2.html
Aceasta este Vederea 2
Vizualizarea 1 Vizualizarea 3
view3.html
Aceasta este Vederea 3
Vizualizarea 1 Vizualizarea 2
Amintiți-vă că aceste trei fișiere HTML sunt pagini parțiale care vor fi injectate în shellPage.html conform URL-ului pe care l-am definit în fișierul config.js
Definirea stilurilor și animațiilor:
Să punem ceva viață în punctele noastre de vedere aplicând CSS la acesta
.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 { culoare: # 333 poziție: alinierea textului absolut: centru sus: 50px lățime: 100%} / * Culori de fundal și text pentru pagini cu vizualizare parțială (vizualizare1, vizualizare2, vizualizare3) ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Pentru a face o tranziție curată între diferite vizualizări, vom seta proprietatea CSS-index
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Acum este timpul să ne definim animațiile
Slide Animation Stânga
/ * glisați spre stânga * / @keyframes slideOutLeft {to {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}Scale Up Animation
/ * 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)}}Glisați din animația din dreapta
/ * slide in from the right * / @keyframes slideInRight {from {transform: translateX (100%)} to {transform: translateX (0)}} @ -moz-keyframes slideInRight {from {-moz-transform: translateX (100 %)} la {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {din {-webkit-transform: translateX (100%)} la {-webkit-transform: translateX (0)}}Glisați din animația de jos
/ * slide in from bottom * / @keyframes slideInUp {from {transform: translateY (100%)} to {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform: translateY (100 %)} la {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {din {-webkit-transform: translateY (100%)} la {-webkit-transform: translateY (0)}}Rotire și cădere animație
/ * rotire și cădere * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: ușurință- 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-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) animație-temporizare-funcție: ușurință} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}Rotiți animația ziarului
/ * rotate out newspaper * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) opacitate: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacitate: 0}}Aplicarea animațiilor:
Este timpul să aplicăm animațiile definite anterior
Vizualizați 1 animații
/ * Vizualizați 1 animații pentru a părăsi pagina și introduceți * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s ambele ușor-în -moz-animație: slideOutLeft 0.5s ambele ușor de animat: slideOutLeft 0.5s ambele ușor -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s atât ușurință în -moz-animație: scaleUp 0.5s atât ușurință în animație: scaleUp 0.5s atât ușurință}Vizualizați 2 animații
/ * Vizualizați 2 animații pentru a părăsi pagina și introduceți * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotate Fall 1s ambele ușurează-în -moz-transform-origine: 0% 0% -moz-animație: rotateFall 1s ambele ușurință în transformare-origine: 0% 0% animație: rotateFall 1s ambele ușurință-în} .view2.ng-enter {-webkit-animation: slideInRight 0.5s ambele ușurință în - moz-animație: slideInRight 0.5s ambele animație ușoară: slideInRight 0.5s ambele ușurință}Vizualizați 3 animații
/ * Vizualizați 3 animații pentru părăsirea paginii și introduceți * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s ambele ușurează-în -moz-transform-origine: 50 % 50% -moz-animation: rotateOutNewspaper .5s ambele facilitează transformarea-origine: 50% 50% animație: rotateOutNewspaper .5s ambele ușurează} .view3.ng-enter {-webkit-animation: slideInUp 0.5s ambele ușurează -in -moz-animation: slideInUp 0.5s ambele animație ușoară: slideInUp 0.5s ambele ușurință}Am terminat cu toate schimbările. Acum este timpul să rulați aplicația
Rularea aplicației
ce se serializează în java
La rularea aplicației, vi se va prezenta pagina de mai jos:
Faceți clic pe linkuri și veți vedea animații în joc, la intrarea și părăsirea paginilor parțiale.
Există diverse alte animații care pot fi folosite. De asemenea, un set copleșitor de posibile efecte poate fi aici: http://tympanus.net/Development/PageTransitions/
Descarcă codul și încearcă-l singur
[buttonleads form_title = ”Cod de descărcare” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Cod de descărcare”]
Sper că ți-a plăcut animația de mai sus cu blogul ngAnimate. Dacă doriți să vă scufundați în Angular JS, v-aș recomanda de ce să nu aruncați o privire asupra noastră pagina cursului. Antrenamentul de certificare Angular JS de la Edureka vă va face un expert în Angular JS prin sesiuni de instructor live și instruire practică folosind cazuri de utilizare din viața reală.
Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii și vă vom răspunde.
Postări asemănatoare:
Analizarea fișierelor XML utilizând SAX Parser