AngularJS is een superheldisch JavaScript-framework dat het maken van Single Page Applications (SPA) heel eenvoudig maakt. Bovendien wordt AngularJS geleverd met een handvol hoekmodules die kunnen worden gebruikt om een geweldige gebruikerservaring te creëren. In dit bericht gaan we zien hoe we populaire ngAnimate kunnen gebruiken om paginaovergangen / animaties toe te voegen aan hoekige weergaven.
ngAnimate kan worden gebruikt met verschillende richtlijnen zoals ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.
In dit bericht zullen we animaties gebruiken met ngView
Hier gebruiken we Brackets IDE van Adobe, maar u bent vrij om anderen te gebruiken, bijvoorbeeld Sublime Text, WebStorm van JetBrains etc.
Opmerking : We zullen ook Bootswatch Bootstrap API gebruiken om onze HTML-pagina's een mooie uitstraling te geven
Project structuur:
Hieronder ziet u de projectstructuur in Brackets IDE
Hier is de korte beschrijving van elk bestand dat in het project wordt gebruikt
animatie.css - hoofd CSS-bestand waarin we onze pagina-animaties definiëren
bootstrap.min.css - bootswatch bootstrap voor het geven van onze tags een mooie look
config.js - hoofd JavaScript-bestand waarin we onze hoekmodule samen met routes en controllers definiëren
shellPage.html - Dit is de shell-pagina waarin andere weergaven dynamisch worden geladen
view1.html, view2.html, view3.html - Dit zijn de gedeeltelijke weergaven die in de shellPage worden geladen
sas programmeerhandleiding voor beginners
Hoe worden animaties toegepast:
ngAnimate past CSS-klassen toe op verschillende Angular-richtlijnen, afhankelijk van of ze de weergave binnenkomen of verlaten
.ng-enter - Deze CSS-klasse is van toepassing op de richtlijn wanneer deze op de pagina wordt geladen
.ng-verlof - Deze CSS-klasse is van toepassing op de richtlijn wanneer deze de pagina verlaat
Laten we elk bestand een voor een doornemen
shellPage.html
shellPage laadt de vereiste bronnen, past ng-app toe op body en voegt ng-view toe om de views dynamisch te injecteren.
config.js
In het configuratiebestand definiëren we onze hoekmodule samen met routes en controllers.
Module transitionApp heeft twee afhankelijkheden: ngAnimate en ngRoute
var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (functie ($ 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 ', functie ($ scope) {$ scope.cssClass =' view1 '}) transitionApp.controller (' view2Controller ', functie ($ scope) { $ scope.cssClass = 'view2'}) transitionApp.controller ('view3Controller', functie ($ scope) {$ scope.cssClass = 'view3'})We hebben drie gedeeltelijke weergaven gedefinieerd (view1, view2, view3) die afhankelijk van de URL in de shellpage zullen worden geïnjecteerd. Respectieve controllers stellen een cssClass-attribuut in, wat de naam is van de CSS-klasse, die wordt toegepast op de ng-view. We zullen onze animaties definiëren in deze CSS-klassen die elke pagina met verschillende animaties laden.
Gedeeltelijke pagina's view1.html, view2.html, view3.html
Er is niet veel in gedeeltelijke pagina's, alleen wat tekst en een link naar andere weergaven
view1.html
Dit is weergave 1
Bekijk 2 Bekijk 3
view2.html
Dit is weergave 2
Bekijk 1 Bekijk 3
view3.html
Dit is weergave 3
Bekijk 1 Bekijk 2
Onthoud dat deze drie HTML-bestanden gedeeltelijke pagina's zijn die in shellPage.html worden geïnjecteerd volgens de URL die we hebben gedefinieerd in het bestand config.js
Stijlen en animaties definiëren:
Laten we onze opvattingen wat leven geven door er CSS op toe te passen
.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 { kleur: # 333 positie: absoluut text-align: midden boven: 50px breedte: 100%} / * Achtergrond- en tekstkleuren voor pagina's met gedeeltelijke weergave (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {achtergrond: # bef2de kleur: # 00907c} .view2 {achtergrond: # D4D0EA kleur: # 55316f} .view3 {achtergrond: # FFCBA4 kleur: rgba (149, 95, 40, 0.91)}Om een schone overgang tussen verschillende weergaven te maken, zullen we de CSS z-index-eigenschap instellen
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Nu is het tijd om onze animaties te definiëren
Schuif naar links animatie
/ * schuif naar links * / @keyframes slideOutLeft {naar {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {naar {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {naar {-webkit-transform: translateX (-100%)}}Animatie opschalen
/ * opschalen * / @keyframes scaleUp {van {dekking: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {van {dekking: 0.3 -moz-transform: scale (0.8)}} @ -webkit- keyframes scaleUp {van {opacity: 0.3 -webkit-transform: scale (0.8)}}Schuif in vanaf de juiste animatie
/ * schuif van rechts naar binnen * / @keyframes slideInRight {van {transform: translateX (100%)} naar {transform: translateX (0)}} @ -moz-keyframes slideInRight {van {-moz-transform: translateX (100 %)} naar {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {van {-webkit-transform: translateX (100%)} naar {-webkit-transform: translateX (0)}}Schuif in vanaf de onderste animatie
/ * schuif van onder naar binnen * / @keyframes slideInUp {van {transform: translateY (100%)} naar {transform: translateY (0)}} @ -moz-keyframes slideInUp {van {-moz-transform: translateY (100 %)} naar {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {van {-webkit-transform: translateY (100%)} naar {-webkit-transform: translateY (0)}}Draai en val animatie
/ * roteren en vallen * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animatie-timing-functie: gemak- 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-animatie-timing-functie: gemak-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) animatie-timing-functie: gemak-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}Draai de animatie van de krant
/ * roteer krant * / @ -webkit-keyframes rotateOutNewspaper {naar {-webkit-transform: translateZ (-3000px) rotateZ (360deg) dekking: 0}} @ -moz-keyframes rotateOutNewspaper {naar {-moz-transform: translateZ (-3000px) rotateZ (360deg) dekking: 0}} @keyframes rotateOutNewspaper {naar {transform: translateZ (-3000px) rotateZ (360deg) dekking: 0}}Animaties toepassen:
Het is tijd om de animaties toe te passen die we eerder hadden gedefinieerd
Bekijk 1 animaties
/ * Bekijk 1 animaties voor pagina verlaten en voer * / .view1.ng-leave {-webkit-animation: slideOutLeft 0,5s beide gemakkelijk-in -moz-animatie: slideOutLeft 0,5s beide gemakkelijke animatie: slideOutLeft 0,5s beide gemak -in} .view1.ng-enter {-webkit-animation: scaleUp 0,5s beide gemak-in -moz-animation: scaleUp 0,5s beide gemakkelijke animatie: scaleUp 0,5s beide gemak-in}Bekijk 2 animaties
/ * Bekijk 2 animaties voor het verlaten van de pagina en voer * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s beide gemak-in -moz-transform-origin: 0% in 0% -moz-animatie: rotateFall 1s beide gemak-in transformatie-oorsprong: 0% 0% animatie: rotateFall 1s beide gemak-in} .view2.ng-enter {-webkit-animation: slideInRight 0,5s beide gemak-in - moz-animation: slideInRight 0,5s beide easy-in animatie: slideInRight 0,5s beide easy-in}Bekijk 3 animaties
/ * Bekijk 3 animaties voor het verlaten van de pagina en voer * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s beide gemak-in -moz-transform-origin: 50 in % 50% -moz-animatie: rotateOutNewspaper .5s beide gemak-in transformatie-oorsprong: 50% 50% animatie: rotateOutNewspaper .5s beide gemak-in} .view3.ng-enter {-webkit-animatie: slideInUp 0,5s beide gemak -in -moz-animatie: slideInUp 0,5s beide animatie: slideInUp 0,5s beide gemak}We zijn klaar met alle veranderingen. Nu is het tijd om de applicatie uit te voeren
De applicatie uitvoeren
Bij het starten van de applicatie krijgt u de onderstaande pagina te zien:
Klik op de links en je zult animaties zien die in het spel zijn, bij het betreden en verlaten van de deelpagina's.
Er zijn verschillende andere animaties die kunnen worden gebruikt. Er kan ook een overweldigende reeks mogelijke effecten zijn: http://tympanus.net/Development/PageTransitions/
Download de code en probeer het zelf
[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']
Ik hoop dat je de bovenstaande animatie met ngAnimate-blog leuk vond. Als je diep in Angular JS wilt duiken, zou ik je aanraden, waarom zou je onze cursuspagina. De Angular JS Certification-training bij Edureka zal je een expert in Angular JS maken door middel van live door een instructeur geleide sessies en hands-on training met gebruikmaking van praktijkcases.
Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte en we nemen contact met u op.
java for loop programma voorbeelden
Gerelateerde berichten:
XML-bestanden parseren met SAX Parser