AngularJS to superbohaterski framework JavaScript, który bardzo ułatwia tworzenie aplikacji jednostronicowych (SPA). Ponadto AngularJS zawiera kilka modułów kątowych, których można użyć do stworzenia niesamowitych wrażeń użytkownika. W tym poście zobaczymy, jak używać popularnego programu ngAnimate do dodawania przejść / animacji stron do widoków kątowych.
ngAnimate może być używany z różnymi dyrektywami, takimi jak ngRepeat, ngView, ngInclude, ngIf, ngMessage itp.
W tym poście wykorzystamy animacje z ngView
Tutaj używamy Brackets IDE firmy Adobe, ale możesz swobodnie korzystać z innych, na przykład Sublime Text, WebStorm z JetBrains itp.
Uwaga : Użyjemy również API Bootstrap Bootswatch, aby nadać naszym stronom HTML piękny wygląd
Struktura projektu:
Poniżej znajduje się struktura projektu w Brackets IDE
Oto krótki opis każdego pliku używanego w projekcie
animacja.css - główny plik CSS, w którym definiujemy animacje naszej strony
bootstrap.min.css - bootstrap do butów do nadania naszym oznacza piękny wygląd
config.js - główny plik JavaScript, w którym definiujemy nasz moduł kątowy wraz z trasami i kontrolerami
shellPage.html - To jest strona powłoki, na której inne widoki będą ładowane dynamicznie
view1.html, view2.html, view3.html - To są częściowe widoki, które zostaną załadowane na shellPage
Jak są stosowane animacje:
ngAnimate stosuje klasy CSS do różnych dyrektyw Angular w zależności od tego, czy wchodzą lub wychodzą z widoku
.ng-enter - Ta klasa CSS ma zastosowanie do dyrektywy za każdym razem, gdy zostanie załadowana na stronę
jak wyjść z programu java
.ng-zostaw - Ta klasa CSS ma zastosowanie do dyrektywy za każdym razem, gdy opuszcza stronę
Przejrzyjmy każdy plik jeden po drugim
shellPage.html
shellPage ładuje wymagane zasoby, stosuje ng-app do body i dodaje ng-view, aby dynamicznie wstrzykiwać widoki.
config.js
W pliku konfiguracyjnym definiujemy nasz moduł kątowy wraz z trasami i kontrolerami.
stl sort c ++
Moduł TransitionApp ma dwie zależności: ngAnimate i ngRoute
var przejścieApp = angular.module ('transitApp', ['ngAnimate', 'ngRoute']) transitApp.config (function ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'częściowe / view1.html' , controller: 'view1Controller'}) .when ('/ view2', {templateUrl: 'Parts / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'częściowe / widok3. html ', kontroler:' view3Controller '})}) transitApp.controller (' view1Controller ', function ($ scope) {$ scope.cssClass =' view1 '}) transitApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) transitApp.controller ('view3Controller', function ($ scope) {$ scope.cssClass = 'view3'})Zdefiniowaliśmy trzy częściowe widoki (view1, view2, view3), które będą wstawiane do shellpage w zależności od adresu URL. Odpowiednie kontrolery ustawiają atrybut cssClass, który jest nazwą klasy CSS, która zostanie zastosowana do widoku ng-view. W tych klasach CSS zdefiniujemy nasze animacje, które będą ładować każdą stronę z różnymi animacjami.
Częściowe strony view1.html, view2.html, view3.html
Na częściowych stronach nie ma nic, tylko trochę tekstu i linki do innych widoków
view1.html
To jest widok 1
Widok 2 Widok 3
view2.html
To jest widok 2
Widok 1 Widok 3
view3.html
To jest widok 3
Widok 1 Widok 2
Pamiętaj, że te trzy pliki HTML to częściowe strony, które zostaną wstrzyknięte do shellPage.html zgodnie z adresem URL, który zdefiniowaliśmy w pliku config.js
Definiowanie stylów i animacji:
Tchnijmy życie w nasze poglądy, stosując do nich CSS
.view {bottom: 0 padding-top: 200px position: bezwzględna text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { kolor: # 333 pozycja: bezwzględne wyrównanie tekstu: do środka na górze: 50 pikseli szerokość: 100%} / * Kolory tła i tekstu na stronach widoku częściowego (widok1, widok2, widok3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Aby zapewnić płynne przejście między różnymi widokami, ustawimy właściwość CSS z-index
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Nadszedł czas, aby zdefiniować nasze animacje
Przesuń lewą animację
/ * wysuń w lewo * / @keyframes slideOutLeft {do {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {do {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {do {-webkit-transform: translateX (-100%)}}Skaluj animację
/ * 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)}}Przesuń się z prawej animacji
/ * wsuń się z prawej strony * / @keyframes slideInRight {z {transform: translateX (100%)} do {transform: translateX (0)}} @ -moz-keyframes slideInRight {from {-moz-transform: translateX (100 %)} do {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {z {-webkit-transform: translateX (100%)} do {-webkit-transform: translateX (0)}}Wsuń się od dołu animacji
/ * wsuń się od dołu * / @keyframes slideInUp {from {transform: translateY (100%)} to {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform: translateY (100 %)} do {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {z {-webkit-transform: translateY (100%)} do {-webkit-transform: translateY (0)}}Animacja obracania i opadania
/ * rotate and fall * / @ -webkit-keyframes rotate Fall {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% {transform: rotateZ (10 stopni) funkcja-timingu-animacji: relax-out} 40% {transform: rotateZ (17 stopni)} 60% {transform: rotateZ (16 stopni)} 100% {transform: translateY (100%) rotateZ (17 stopni)}}Obróć animację prasową
/ * obróć gazetę * / @ -webkit-keyframes rotateOutNewspaper {do {-webkit-transform: translateZ (-3000px) rotateZ (360 stopni) krycie: 0}} @ -moz-keyframes rotateOutNewspaper {do {-moz-transform: translateZ (-3000px) rotateZ (360 stopni) krycie: 0}} @keyframes rotateOutNewspaper {do {transform: translateZ (-3000px) rotateZ (360 stopni) krycie: 0}}Stosowanie animacji:
Czas zastosować animacje, które wcześniej zdefiniowaliśmy
Wyświetl 1 animacje
/ * Wyświetl 1 animację do opuszczenia strony i wprowadź * / .view1.ng-leave {-webkit-animation: slideOutLeft 0,5 s oba ułatwienia -moz-animation: slideOutLeft 0,5 s obie ułatwienia animacji: slideOutLeft 0,5 s oba ułatwienia -in} .view1.ng-enter {-webkit-animation: scaleUp 0,5s oba ułatwienia -moz-animation: scaleUp 0,5s oba ułatwienia animacji: scaleUp 0,5s oba ułatwienia}Wyświetl 2 animacje
/ * Wyświetl 2 animacje do opuszczenia strony i wpisz * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotate Fall 1s zarówno easy-in -moz-transform-origin: 0% 0% -moz-animation: rotate Fall 1s oba ułatwienia transform-origin: 0% 0% animation: rotate Fall 1s oba ułatwienia} .view2.ng-enter {-webkit-animation: slideInRight 0,5s oba ułatwienia - moz-animation: slideInRight 0,5 s, oba ułatwienia, animacja: slideInRight 0,5 s, oba ułatwienia}Wyświetl 3 animacje
/ * Wyświetl 3 animacje do opuszczenia strony i wpisz * / .view3.ng-Leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s oba ułatwiają-w-moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s zarówno ułatwiają transformację pochodzenia: 50% 50% animacji: rotateOutNewspaper .5s oba ułatwienia} .view3.ng-enter {-webkit-animation: slideInUp 0,5s oba łatwiej -in -moz-animation: slideInUp 0,5 s zarówno animacja ułatwiająca wprowadzanie: slideInUp 0,5 s jednocześnie łagodna}Skończyliśmy ze wszystkimi zmianami. Nadszedł czas, aby uruchomić aplikację
Uruchomienie aplikacji
Po uruchomieniu aplikacji zostanie wyświetlona poniższa strona:
Kliknij linki, a zobaczysz animacje uruchamiane podczas wchodzenia i wychodzenia z częściowych stron.
Istnieje wiele innych animacji, których można użyć. Może tu być również przytłaczający zestaw możliwych efektów: http://tympanus.net/Development/PageTransitions/
najlepszy pomysł java dla ubuntu
Pobierz kod i wypróbuj sam
[buttonleads form_title = ”Pobierz kod” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Pobierz kod”]
Mam nadzieję, że podobała Ci się powyższa animacja na blogu ngAnimate. Jeśli chcesz zagłębić się w temat Angular JS, polecam Ci, dlaczego nie zajrzeć do naszego strona kursu. Szkolenie Angular JS Certification w Edureka uczyni Cię ekspertem w Angular JS dzięki sesjom prowadzonym na żywo przez instruktora i praktycznym szkoleniom z wykorzystaniem rzeczywistych przypadków użycia.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy, a my skontaktujemy się z Tobą.
Powiązane posty:
Przetwarzanie plików XML przy użyciu SAX Parser