Animace aplikací AngularJS pomocí ngAnimate

Tento blog vysvětlí, jak používat populární ngAnimate k přidání přechodů / animací stránek do úhlových pohledů, tj. Jak vytvořit animaci pomocí ngAnimate

AngularJS je superhrdinský rámec JavaScriptu, díky němuž je vytváření Single Page Applications (SPA) velmi snadné. Kromě toho AngularJS přichází s hrstkou úhlových modulů, které lze použít k vytvoření úžasné uživatelské zkušenosti. V tomto příspěvku uvidíme, jak používat populární ngAnimate k přidávání přechodů / animací stránek do úhlových pohledů.

ngAnimate lze použít s různými směrnicemi jako ngRepeat, ngView, ngInclude, ngIf, ngMessage atd.





V tomto příspěvku použijeme animace s ngView

Zde používáme závorky IDE od Adobe, ale můžete používat i jiné, například Sublime Text, WebStorm od JetBrains atd.



Poznámka : Abychom našim stránkám HTML poskytli krásný vzhled, použijeme také Bootswatch Bootstrap API

c ++ třídicí pole

Struktura projektu:

Níže je struktura projektu v hranatých závorkách IDE



ngAnimate-angularjs-project-structure

Zde je krátký popis každého souboru použitého v projektu

animation.css - hlavní soubor CSS, kde definujeme naše animace stránky

bootstrap.min.css - bootstrap bootwatch pro dávání našich označí krásný vzhled

config.js - hlavní soubor JavaScriptu, kde definujeme náš úhlový modul spolu s trasami a řadiči

shellPage.html - Toto je stránka prostředí, na které se budou dynamicky načítat další zobrazení

view1.html, view2.html, view3.html - Toto jsou částečné pohledy, které budou načteny do shellPage

Jak se používají animace:

ngAnimate aplikuje třídy CSS na různé direktivy Angular podle toho, zda vstupují nebo opouštějí pohled

.ng-vstoupit - Tato třída CSS platí pro směrnici, kdykoli se načte na stránku

.ng odejít - Tato třída CSS platí pro směrnici, kdykoli opustí stránku

Projdeme si každý soubor jeden po druhém

shellPage.html

shellPage načte požadované zdroje, použije ng-app na tělo a přidá ng-view pro dynamické vložení pohledů.

  

config.js

V konfiguračním souboru definujeme náš úhlový modul spolu s trasami a řadiči.

Modul transitionApp mají dvě závislosti: ngAnimate a ngRoute

var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (funkce ($ 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', function ($ scope) {$ scope.cssClass = 'view3'})

Definovali jsme tři dílčí pohledy (view1, view2, view3), které budou vloženy do shellpage v závislosti na URL. Respektivní řadiče nastaví atribut cssClass, což je název třídy CSS, který se použije na zobrazení ng. Definujeme naše animace v těchto třídách CSS, které načtou každou stránku s různými animacemi.

Dílčí stránky view1.html, view2.html, view3.html

Na dílčích stránkách není nic moc, jen nějaký text a odkaz na jiné pohledy

view1.html

metoda přetížení a přepsání v Javě

Toto je pohled 1

Pohled 2 Pohled 3

view2.html

Toto je Pohled 2

Zobrazit 1 Pohled 3

view3.html

Toto je Pohled 3

Zobrazit 1 Pohled 2

Nezapomeňte, že tyto tři soubory HTML jsou částečné stránky, které budou vloženy do souboru shellPage.html podle adresy URL, kterou jsme definovali v souboru config.js

Definování stylů a animací:

Pojďme dát život našim názorům tím, že na ně použijeme 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 { barva: pozice # 333: absolutní zarovnání textu: střed horní: šířka 50px: 100%} / * Barvy pozadí a textu pro stránky částečného zobrazení (pohled1, pohled2, pohled3) ------------- ------------------------------------------------ * / .view1 {pozadí: # bef2de barva: # 00907c} .view2 {pozadí: # D4D0EA barva: # 55316f} .view3 {pozadí: # barva FFCBA4: rgba (149, 95, 40, 0,91)}

Abychom provedli čistý přechod mezi různými pohledy, nastavíme vlastnost CSS z-index

.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}

Nyní je čas definovat naše animace

Animace snímku vlevo

/ * vysuňte vlevo * / @keyframes slideOutLeft {do {transformace: translateX (-100%)}} @ -moz-keyframes slideOutLeft {do {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}

Zvětšit animaci

/ * scale up * / @keyframes scaleUp {od {opacity: 0,3 transformace: scale (0,8)}} @ -moz-keyframes scaleUp {od {opacity: 0,3 -moz-transform: scale (0,8)}} @ -webkit- keyframes scaleUp {from {opacity: 0.3 -webkit-transform: scale (0.8)}}

Zasunutí z pravé animace

/ * zasuňte zprava * / @keyframes slideInRight {z {transform: translateX (100%)} do {transform: translateX (0)}} @ -moz-keyframes slideInRight {z {-moz-transform: translateX (100 %)} do {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {od {-webkit-transform: translateX (100%)} do {-webkit-transform: translateX (0)}}

Zasunutí ze spodní animace

/ * zasuňte zdola * / @keyframes slideInUp {z {transform: translateY (100%)} do {transform: translateY (0)}} @ -moz-keyframes slideInUp {z {-moz-transform: translateY (100 %)} na {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {od {-webkit-transform: translateY (100%)} do {-webkit-transform: translateY (0)}}

Otočit a spadnout animaci

/ * rotate and fall * / @ -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-transform: rotateZ (17deg)} 60% {-moz-transform: rotateZ (16deg)} 100% {-moz-transform: translateY (100%) rotateZ (17deg)}} @keyframes rotateFall {0% {transform: rotateZ (0deg) } 20% {transformace: rotateZ (10 stupňů), funkce časování animace: odlehčení} 40% {transformace: rotateZ (17 stupňů)} 60% {transformace: rotateZ (16 stupňů)} 100% {transformace: translateY (100%) rotateZ (17deg)}}

Otočit animaci novin

/ * otočit noviny * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) neprůhlednost: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) krytí: 0}} @keyframes rotateOutNewspaper {to {transformace: translateZ (-3000px) rotateZ (360deg) krytí: 0}}

Použití animací:

Je čas použít animace, které jsme definovali dříve

Zobrazit 1 animace

/ * Zobrazit 1 animace pro opuštění stránky a zadat * / .view1.ng-leave {-webkit-animace: slideOutLeft 0,5 s oběma bez problémů v -moz-animace: slideOutLeft 0,5 s obě bezstarostné animace: slideOutLeft 0,5 s oběma s lehkostí -in} .view1.ng-enter {-webkit-animace: scaleUp 0,5 s obojí bez problémů v -moz-animace: scaleUp 0,5 s jak bezstarostné animace: scaleUp 0,5 s jak bez problémů}

Zobrazit 2 animace

/ * Zobrazit 2 animace pro odchod ze stránky a zadat * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animace: rotateFall 1s oba easy-in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s oba usnadnění transformace-původ: 0% 0% animace: rotateFall 1s oba usnadnění-}} view2.ng-enter {-webkit-animation: slideInRight 0,5s oba usnadnění - moz-animation: slideInRight 0,5 s, oba usnadňují animaci: slideInRight 0,5 s, oba usnadňují}

Zobrazit 3 animace

/ * Zobrazte 3 animace pro opuštění stránky a zadejte * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s oba easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper 0,5 s oběma způsoby usnadnění transformace: 50% 50% animace: rotateOutNewspaper 0,5 s oběma způsoby usnadnění} .view3.ng-enter {-webkit-animace: slideInUp 0,5 s oběma způsoby -in -moz-animation: slideInUp 0,5 s obě usnadňují animaci: slideInUp 0,5 s obě usnadňují}

Se všemi změnami jsme hotovi. Nyní je čas spustit aplikaci

Spuštění aplikace

Při spuštění aplikace se zobrazí následující stránka:

převést datum řetězce na datum v javě

Klikněte na odkazy a uvidíte animace ve hře, při vstupu a opuštění dílčích stránek.

Lze použít různé další animace. Zde může být také ohromná sada možných efektů: http://tympanus.net/Development/PageTransitions/

Stáhněte si kód a zkuste to sami

[buttonleads form_title = ”Stáhnout kód” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Stáhnout kód”]

Doufám, že se vám výše uvedená Animace s blogem ngAnimate líbila. Pokud se chcete hlouběji ponořit do Angular JS, doporučil bych vám, proč se nepodívat na naši stránka kurzu. Certifikační školení Angular JS na Edurece z vás udělá odborníka v Angular JS prostřednictvím živých lekcí vedených instruktorem a praktického školení pomocí případů použití v reálném životě.

Máte na nás dotaz? Uveďte to prosím v sekci komentáře a my se vám ozveme.

Související příspěvky:

Analýza souborů XML pomocí analyzátoru SAX