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
Ето краткото описание на всеки файл, използван в проекта
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