AngularJS - это супергероическая структура JavaScript, которая упрощает создание одностраничных приложений (SPA). Вдобавок ко всему AngularJS поставляется с несколькими модулями angular, которые можно использовать для создания потрясающего пользовательского опыта. В этом посте мы увидим, как использовать популярный ngAnimate для добавления переходов / анимации страниц в угловые представления.
ngAnimate можно использовать с различными директивами, такими как ngRepeat, ngView, ngInclude, ngIf, ngMessage и т. д.
В этом посте мы будем использовать анимацию с ngView
Здесь мы используем Brackets IDE от Adobe, но вы можете использовать другие, например, Sublime Text, WebStorm от JetBrains и т. Д.
Заметка : Мы также будем использовать API-интерфейс Bootswatch Bootstrap, чтобы придать нашим HTML-страницам красивый вид.
Структура проекта:
Ниже представлена структура проекта в Brackets 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-leave - Этот класс CSS применяется к директиве всякий раз, когда она покидает страницу.
Давайте пройдемся по каждому файлу по одному
shellPage.html
shellPage загружает необходимые ресурсы, применяет ng-app к телу и добавляет ng-view для динамического внедрения представлений.
config.js
В файле конфигурации мы определяем наш угловой модуль вместе с маршрутами и контроллерами.
числа Фибоначчи c ++
Модуль transitionApp имеет две зависимости: ngAnimate и ngRoute.
var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (function ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , контроллер: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', контроллер: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', контроллер:' view3Controller '})}) transitionApp.controller (' view1Controller ', функция ($ scope) {$ scope.cssClass =' view1 '}) transitionApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) transitionApp.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 {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 { color: # 333 position: absolute text-align: center top: 50px width: 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-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Пришло время определить нашу анимацию
Слайд влево Анимация
/ * сдвинуть влево * / @keyframes slideOutLeft {to {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}Масштабирование анимации
/ * масштабирование * / @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)}}Вставить из правой анимации
нечеткая логика в искусственном интеллекте
/ * вставьте справа * / @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 {from {transform: translateY (100%)} to {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-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-time-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-time-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 (10deg) animation-time-function: easy-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}Повернуть анимацию газеты
/ * повернуть газету * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}Применение анимации:
Пришло время применить анимацию, которую мы определили ранее.
Посмотреть 1 анимацию
/ * Просмотрите 1 анимацию для перехода на страницу и введите * / .view1.ng-leave {-webkit-animation: slideOutLeft 0,5s и легкость в -moz-animation: slideOutLeft 0,5 с, обе анимация простоты: slideOutLeft 0,5 с, обе легкость -in} .view1.ng-enter {-webkit-animation: scaleUp 0,5 сек. обе легкость в -moz-animation: scaleUp 0,5 сек. обе легкость в анимации: scaleUp 0,5 сек. обе легкость в}Просмотреть 2 анимации
/ * Просмотрите 2 анимации для выхода на страницу и введите * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s и легкость в -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s как легкость в трансформации origin: 0% 0% animation: rotateFall 1s, так и в режиме easy-in} .view2.ng-enter {-webkit-animation: slideInRight 0,5s как в режиме легкости - moz-animation: slideInRight 0,5 сек. обе легкости анимации: slideInRight 0,5 сек. обе}Посмотреть 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 оба легкость в трансформации origin: 50% 50% анимация: rotateOutNewspaper .5s оба легкость входа} .view3.ng-enter {-webkit-animation: slideInUp 0,5s и легкость -in -moz-animation: slideInUp 0,5 сек. обе легкости анимации: slideInUp 0,5 сек. обе легкости}Мы закончили со всеми изменениями. Пришло время запустить приложение
Запуск приложения
После запуска приложения вам будет представлена следующая страница:
Щелкните ссылки, и вы увидите анимацию при входе и выходе на частичные страницы.
Можно использовать различные другие анимации. Также здесь может быть ошеломляющий набор возможных эффектов: 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