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
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