Анимация на AngularJS приложения с ngAnimate



Този блог ще обясни как да използвате популярния ngAnimate за добавяне на преходи на страници / анимации към ъглови изгледи, т.е. как да създадете анимация с помощта на ngAnimate

AngularJS е супергероична JavaScript рамка, която прави създаването на приложения за една страница (SPA) много лесно. На всичкото отгоре AngularJS идва с шепа ъглови модули, които могат да се използват за създаване на страхотно потребителско изживяване. В тази публикация ще видим как да използваме популярния ngAnimate за добавяне на преходи / анимации на страници към ъглови изгледи.

ngAnimate може да се използва с различни директиви като ngRepeat, ngView, ngInclude, ngIf, ngMessage и др.





проста реализация на hashmap в java

В тази публикация ще използваме анимации с ngView

Тук използваме IDE на скоби от Adobe, но можете да използвате и други, например Sublime Text, WebStorm от JetBrains и т.н.



Забележка : Също така ще използваме Bootswatch Bootstrap API, за да придадем на нашите HTML страници красив вид

Структура на проекта:

По-долу е представена структурата на проекта в скоби IDE



ngAnimate-angularjs-project-structure

Ето краткото описание на всеки файл, използван в проекта

animation.css - основен CSS файл, където дефинираме анимациите на нашата страница

bootstrap.min.css Bootstrap за даване на нашите маркира красив външен вид

config.js - основен JavaScript файл, където дефинираме нашия ъглов модул заедно с маршрути и контролери

shellPage.html - Това е страницата на черупката, в която други изгледи ще се зареждат динамично

view1.html, view2.html, view3.html - Това са частичните изгледи, които ще бъдат заредени в shellPage

Как се прилагат анимациите:

ngAnimate прилага CSS класове към различни Angular директиви в зависимост от това дали те влизат или излизат от изгледа

.ng-enter - Този клас CSS се прилага за директивата всеки път, когато се зареди на страницата

.ng-отпуск - Този клас CSS се прилага към директивата всеки път, когато напусне страницата

Нека да разгледаме всеки файл един по един

shellPage.html

shellPage зарежда необходимите ресурси, прилага ng-app към тялото и добавя ng-view за динамично инжектиране на изгледите.

  

config.js

В конфигурационния файл дефинираме нашия ъглов модул заедно с маршрути и контролери.

Преходът на модула има две зависимости: ngAnimate и ngRoute

var prelazApp = angular.module ('prelazApp', ['ngAnimate', 'ngRoute']) prelazApp.config (функция ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , контролер: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', контролер:' view3Controller '})}) prelazApp.controller (' view1Controller ', функция ($ scope) {$ scope.cssClass =' ​​view1 '}) prelazApp.controller (' view2Controller ', функция ($ scope) { $ scope.cssClass = 'view2'}) prelazApp.controller ('view3Controller', функция ($ scope) {$ scope.cssClass = 'view3'})

Дефинирали сме три частични изгледа (view1, view2, view3), които ще бъдат инжектирани в черупката в зависимост от URL адреса. Съответните контролери задават атрибут cssClass, който е името на CSS клас, който ще бъде приложен към ng-view. Ще определим нашите анимации в тези CSS класове, които ще заредят всяка страница с различни анимации.

Частични страници view1.html, view2.html, view3.html

В частични страници няма нищо особено, просто малко текст и връзка към други изгледи

view1.html

Това е Изглед 1

Изглед 2 Изглед 3

view2.html

Това е Изглед 2

Изглед 1 Изглед 3

view3.html

Това е Изглед 3

Изглед 1 Изглед 2

Не забравяйте, че тези три HTML файла са частични страници, които ще бъдат инжектирани в shellPage.html според URL адреса, който сме дефинирали във файла config.js

Определяне на стилове и анимации:

Нека вложим малко живот в нашите възгледи, като приложим CSS към него

.view {отдолу: 0 padding-top: 200px position: absolute text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { цвят: # 333 позиция: абсолютно изравняване на текст: отгоре в центъра: 50px ширина: 100%} / * Цветове на фона и текста за частични страници за преглед (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}

За да направим чист преход между различни изгледи, ще зададем свойството CSS z-index

.view.ng-оставете {z-index: 9999} .view.ng-enter {z-index: 8888}

Сега е време да дефинираме нашите анимации

Плъзнете лява анимация

/ * плъзнете се наляво * / @keyframes slideOutLeft {до {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {към {-webkit-transform: translateX (-100%)}}

Увеличаване на анимацията

/ * мащабиране нагоре * / @keyframes scaleUp {от {непрозрачност: 0,3 трансформация: мащаб (0,8)}} @ -moz-keyframes scaleUp {от {непрозрачност: 0,3 -moz-трансформация: мащаб (0,8)}} @ -webkit- ключови кадри scaleUp {от {opacity: 0.3 -webkit-transform: scale (0.8)}}

Плъзнете от дясната анимация

/ * плъзнете отдясно * / @keyframes slideInRight {от {transform: translateX (100%)} в {transform: translateX (0)}} @ -moz-keyframes slideInRight {от {-moz-transform: translateX (100 %)} към {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {от {-webkit-transform: translateX (100%)} към {-webkit-transform: translateX (0)}}

Плъзнете от долната анимация

/ * плъзнете отдолу * / @keyframes slideInUp {от {transform: translateY (100%)} в {transform: translateY (0)}} @ -moz-keyframes slideInUp {от {-moz-transform: translateY (100 %)} към {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {от {-webkit-transform: translateY (100%)} в {-webkit-transform: translateY (0)}}

Завъртане и падане на анимация

/ * завъртане и падане * / @ -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: relief-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% {преобразуване: rotateZ (10deg) функция за анимация-синхронизация: улеснение} 40% {преобразуване: rotateZ (17deg)} 60% {преобразуване: rotateZ (16deg)} 100% {преобразуване: translateY (100%) завърти Z (17 градуса)}}

Завъртете анимация на вестника

/ * завъртане на вестник * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) непрозрачност: 0}} @keyframes rotateOutNewspaper {за {трансформиране: translateZ (-3000px) rotateZ (360deg) непрозрачност: 0}}

Прилагане на анимации:

Време е да приложим анимациите, които бяхме дефинирали преди

как да направите пакет в java -

Вижте 1 анимации

/ * Вижте 1 анимация за напускане на страницата и въведете * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s, както лекота в -moz-animation: slideOutLeft 0.5s, така и анимация за лекота: slideOutLeft 0.5s, лекота -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s, както easy-in -moz-animation: scaleUp 0.5s, така и easy-in animation: scaleUp 0.5s, както easy-in}

Преглед на 2 анимации

/ * Вижте 2 анимации за напускане на страницата и въведете * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s easy-in -moz-transform-origin: 0% 0% -moz-анимация: rotateFall 1s едновременно улеснение в трансформация-произход: 0% 0% анимация: rotateFall 1s едновременно улеснение} .view2.ng-enter {-webkit-animation: slideInRight 0.5s двете улеснения - moz-animation: slideInRight 0.5s, както анимация с лекота: slideInRight 0.5s, както с лекота}

Преглед на 3 анимации

/ * Вижте 3 анимации за напускане на страницата и въведете * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s, както easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s и двете в улеснение при преобразуване на произход: 50% 50% анимация: rotateOutNewspaper .5s и в лекота} .view3.ng-enter {-webkit-animation: slideInUp 0.5s и двете лекота -in -moz-animation: slideInUp 0.5s, така и анимация за лекота: slideInUp 0.5s, както easy-in}

Приключихме с всички промени. Сега е време да стартирате приложението

Стартиране на приложението

При стартиране на приложението ще ви бъде показана страницата по-долу:

Кликнете върху връзките и ще видите анимации в игра, при влизане и излизане от частичните страници.

Има различни други анимации, които могат да се използват. Освен това тук може да има огромен набор от възможни ефекти: http://tympanus.net/Development/PageTransitions/

Изтеглете кода и опитайте сами

[buttonleads form_title = ”Код за изтегляне” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Код за изтегляне”]

Надявам се горната анимация с блога ngAnimate да ви е харесала. Ако искате да се потопите дълбоко в Angular JS, бих ви препоръчал защо да не погледнете нашия страница на курса. Обучението за сертифициране на Angular JS в Edureka ще ви направи експерт в Angular JS чрез ръководени от инструктори сесии и практически обучения, използващи реални случаи на употреба.

Имате въпрос към нас? Моля, споменете го в раздела за коментари и ние ще се свържем с вас.

Подобни публикации:

Анализиране на XML файлове с помощта на SAX Parser