AngularJS är ett superhjälte JavaScript-ramverk som gör det enkelt att skapa SPA (Single Page Applications). Dessutom kommer AngularJS med en handfull vinkelmoduler som kan användas för att skapa en fantastisk användarupplevelse. I det här inlägget kommer vi att se hur man använder populära ngAnimate för att lägga till sidövergångar / animationer i vinkelvyer.
ngAnimate kan användas med olika direktiv som ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.
I det här inlägget kommer vi att använda animationer med ngView
Här använder vi Brackets IDE från Adobe, men du är fri att använda andra, till exempel Sublime Text, WebStorm från JetBrains etc.
Notera : Vi kommer också att använda Bootswatch Bootstrap API för att ge våra HTML-sidor ett vackert utseende
sockelprogrammering i java-exempel
Projektstruktur:
Nedan visas projektstrukturen i parentes IDE
Här är en kort beskrivning av varje fil som används i projektet
animation.css - huvud CSS-fil där vi definierar våra sidanimeringar
bootstrap.min.css - bootswatch bootstrap för att ge vår taggar ett vackert utseende
config.js - huvud JavaScript-fil där vi definierar vår vinkelmodul tillsammans med rutter och styrenheter
shellPage.html - Det här är skalningssidan där andra vyer laddas dynamiskt
view1.html, view2.html, view3.html - Det här är de partiella vyerna som laddas in i shellPage
Hur tillämpas animationer:
ngAnimate tillämpar CSS-klasser på olika vinkeldirektiv beroende på om de går in eller lämnar vyn
.ng-enter - Denna CSS-klass gäller i direktivet när den laddas på sidan
.ng-lämna - Denna CSS-klass gäller i direktivet när den lämnar sidan
Låt oss gå igenom varje fil en efter en
shellPage.html
shellPage laddar de nödvändiga resurserna, tillämpar ng-app på kroppen och lägger till ng-view för att injicera vyerna dynamiskt.
config.js
I konfigurationsfilen definierar vi vår vinkelmodul tillsammans med rutter och styrenheter.
ModulövergångApp har två beroenden: ngAnimate och ngRoute
var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (funktion ($ 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', funktion ($ scope) {$ scope.cssClass = 'view3'})Vi har definierat tre partiella vyer (view1, view2, view3) som kommer att injiceras i shellpage beroende på URL. Respective Controllers ställer in ett cssClass-attribut, som är namnet på CSS-klassen, som kommer att tillämpas på ng-view. Vi kommer att definiera våra animationer i dessa CSS-klasser som laddar varje sida med olika animationer.
Delvisa sidor view1.html, view2.html, view3.html
Det finns inget mycket i delsidor, bara lite text och länk till andra vyer
visa1.html
Det här är vy 1
Visa 2 Visa 3
view2.html
Det här är View 2
Visa 1 Visa 3
view3.html
Det här är vy 3
Visa 1 Visa 2
Kom ihåg att dessa tre HTML-filer är partiella sidor som kommer att injiceras i shellPage.html enligt den URL som vi har definierat i config.js-filen
Definiera stilar och animationer:
Låt oss lägga lite liv i våra åsikter genom att tillämpa CSS på det
.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 { färg: # 333 position: absolut textjustering: mitt uppe: 50px bredd: 100%} / * Bakgrunds- och textfärger för sidvisningar i delvis vy (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {bakgrund: # bef2de färg: # 00907c} .view2 {bakgrund: # D4D0EA färg: # 55316f} .view3 {bakgrund: # FFCBA4 färg: rgba (149, 95, 40, 0.91)}För att göra en ren övergång mellan olika vyer ställer vi in CSS z-index-egenskapen
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Nu är det dags att definiera våra animationer
Skjut vänster animering
/ * skjut ut vänster * / @keyframes slideOutLeft {till {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {till {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {till {-webkit-transform: translateX (-100%)}}Skala upp animering
/ * skala upp * / @keyframes scaleUp {från {opacitet: 0,3 transform: skala (0,8)}} @ -moz-keyframes scaleUp {från {opacitet: 0,3 -moz-transform: skala (0,8)}} @ -webkit- keyframes scaleUp {från {opacity: 0.3 -webkit-transform: scale (0.8)}}Skjut in från höger animering
/ * glida in från höger * / @keyframes slideInRight {från {transform: translateX (100%)} till {transform: translateX (0)}} @ -moz-keyframes slideInRight {från {-moz-transform: translateX (100 %)} till {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {från {-webkit-transform: translateX (100%)} till {-webkit-transform: translateX (0)}}Skjut in från bottenanimering
/ * glida in från botten * / @keyframes slideInUp {från {transform: translateY (100%)} till {transform: translateY (0)}} @ -moz-keyframes slideInUp {från {-moz-transform: translateY (100 %)} till {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {från {-webkit-transform: translateY (100%)} till {-webkit-transform: translateY (0)}}Rotation and Fall Animation
/ * rotera och falla * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: ease- ut} 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)}}Rotera ut tidningsanimering
/ * rotera ut tidningen * / @ -webkit-keyframes rotateOutNewspaper {till {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) opacitet: 0}} @keyframes rotateOutNewspaper {till {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}Använda animationer:
Det är dags att tillämpa de animationer som vi hade definierat tidigare
Visa 1 animationer
/ * Visa 1 animationer för sidled och ange * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s både lätthet -moz-animation: slideOutLeft 0.5s båda lätthet-animation: slideOutLeft 0.5s båda lätthet -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s both ease-in -moz-animation: scaleUp 0.5s both ease-in animation: scaleUp 0.5s both ease-in}Visa 2 animationer
/ * Visa 2 animationer för sidled och ange * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s båda lätt-i -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s både lätta-in-transform-origin: 0% 0% animation: rotateFall 1s både lätthet} .view2.ng-enter {-webkit-animation: slideInRight 0.5s både lätthet - moz-animation: slideInRight 0.5s både lätthet animation: slideInRight 0.5s båda lätthet}Visa 3 animationer
/ * Visa 3 animationer för sidled och ange * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s både lätta-i-moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s både lätt-in-transform-origin: 50% 50% animation: rotateOutNewspaper .5s både lätthet} .view3.ng-enter {-webkit-animation: slideInUp 0.5s båda lätthet -i -moz-animation: slideInUp 0.5s både lätthet-in-animation: slideInUp 0.5s både lätthet}Vi är klara med alla förändringar. Nu är det dags att köra programmet
Köra applikationen
intervjufrågor från Google Data Scientist
När du kör applikationen presenteras nedanstående sida:
Klicka på länkarna så ser du animationer som spelas in, när du går in och lämnar delsidorna.
Det finns olika andra animationer som kan användas. En överväldigande uppsättning möjliga effekter kan också vara här: http://tympanus.net/Development/PageTransitions/
Ladda ner koden och prova själv
[buttonleads form_title = ”Ladda ned kod” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Ladda ner kod”]
Jag hoppas att du gillade ovanstående animering med bloggen ngAnimate. Om du vill fördjupa dig i Angular JS, skulle jag rekommendera dig varför inte titta på vår kurssida. Angular JS-certifieringsutbildningen på Edureka gör dig till en expert inom Angular JS genom live instruktörsledda sessioner och praktisk träning med användningsfall.
Har du en fråga till oss? Vänligen nämna det i kommentarfältet så återkommer vi till dig.
Relaterade inlägg:
Analysera XML-filer med SAX Parser