АнгуларЈС је суперхеројски ЈаваСцрипт оквир који чини стварање апликација за једну страницу (СПА) веома једноставним. Поврх тога, АнгуларЈС долази са прегршт угалих модула који се могу користити за стварање изванредног корисничког искуства. У овом посту ћемо видети како да користимо популарни нгАнимате за додавање прелаза / анимација странице у угаоне погледе.
нгАнимате се може користити са разним директивама попут нгРепеат, нгВиев, нгИнцлуде, нгИф, нгМессаге итд.
У овом посту ћемо користити анимације са нгВиев
Овде користимо заграде ИДЕ компаније Адобе, али слободно можете користити и друге, на пример, Сублиме Тект, ВебСторм из ЈетБраинс итд.
Белешка : Такође ћемо користити Боотсватцх Боотстрап АПИ да бисмо нашим ХТМЛ страницама пружили леп изглед
Структура пројекта:
Испод је структура пројекта у заградама ИДЕ
Ево кратког описа сваке датотеке која се користи у пројекту
аниматион.цсс - главна ЦСС датотека у којој дефинишемо анимације наше странице
боотстрап.мин.цсс - боотсватцх боотстрап за давање наших означава предиван изглед
цонфиг.јс - главна ЈаваСцрипт датотека у којој дефинишемо наш угаони модул заједно са рутама и контролерима
схеллПаге.хтмл - Ово је страница љуске у којој ће се други прикази динамички учитавати
финал вс напокон вс финализе
виев1.хтмл, виев2.хтмл, виев3.хтмл - Ово су делимични прикази који ће се учитати у схеллПаге
Како се примењују анимације:
нгАнимате примењује ЦСС класе на различите Ангулар директиве у зависности од тога да ли улазе или излазе из приказа
.нг-ентер - Ова ЦСС класа се примењује на директиву кад год се учита на страници
.нг-оставити - Ова ЦСС класа се примењује на директиву кад год напусти страницу
Прођимо сваку датотеку једну по једну
схеллПаге.хтмл
схеллПаге учитава потребне ресурсе, примењује нг-апп на тело и додаје нг-виев за динамичко убризгавање приказа.
цонфиг.јс
У конфигурационој датотеци дефинишемо наш угаони модул заједно са рутама и контролерима.
Модул прелазАпп има две зависности: нгАнимате и нгРоуте
вар прелазАпп = ангулар.модуле ('прелазАпп', ['нгАнимате', 'нгРоуте']) прелазАпп.цонфиг (функција ($ роутеПровидер) {$ роутеПровидер .вхен ('/', {темплатеУрл: 'партиалс / виев1.хтмл' , контролер: 'виев1Цонтроллер'}) .вхен ('/ виев2', {темплатеУрл: 'партиалс / виев2.хтмл', контролер: 'виев2Цонтроллер'}) .вхен ('/ виев3', {темплатеУрл: 'партиалс / виев3. хтмл ', контролер:' виев3Цонтроллер '})}) прелазАпп.цонтроллер (' виев1Цонтроллер ', функција ($ опсег) {$ сцопе.цссЦласс =' виев1 '}) прелазАпп.цонтроллер (' виев2Цонтроллер ', функција ($ опсег) { $ сцопе.цссЦласс = 'виев2'}) прелазАпп.цонтроллер ('виев3Цонтроллер', функција ($ опсег) {$ сцопе.цссЦласс = 'виев3'})Дефинисали смо три делимична приказа (виев1, виев2, виев3) који ће се убризгати у шкољку у зависности од УРЛ-а. Одговарајући контролори постављају цссЦласс атрибут, који је назив ЦСС класе, који ће се применити на нг-виев. Наше анимације ћемо дефинисати у овим ЦСС класама које ће сваку страницу учитати различитим анимацијама.
Делимичне странице виев1.хтмл, виев2.хтмл, виев3.хтмл
На делимичним страницама нема ништа посебно, само је неки текст и веза до других погледа
виев1.хтмл
Ово је Поглед 1
Поглед 2 Поглед 3
виев2.хтмл
Ово је Поглед 2
Виев 1 Поглед 3
виев3.хтмл
Ово је Поглед 3
Виев 1 Поглед 2
Имајте на уму да су ове три ХТМЛ датотеке делимичне странице које ће бити убачене у схеллПаге.хтмл према УРЛ-у који смо дефинисали у датотеци цонфиг.јс
Дефинисање стилова и анимација:
Ставимо мало живота у наше погледе применом ЦСС-а на њега
.виев {дно: 0 паддинг-топ: 200пк позиција: апсолутно поравнање текста: центер топ: 0 видтх: 100%} .виев а {маргин-топ: 50пк} .виев х1 {фонт-сизе: 60пк} #хеадинг { боја: # 333 позиција: апсолутно поравнање текста: средина горе: 50пк ширина: 100%} / * Боје позадине и текста за странице са делимичним приказом (поглед1, поглед2, поглед3) ------------- ------------------------------------------------ * / .виев1 {бацкгроунд: # беф2де цолор: # 00907ц} .виев2 {бацкгроунд: # Д4Д0ЕА цолор: # 55316ф} .виев3 {бацкгроунд: # ФФЦБА4 цолор: ргба (149, 95, 40, 0.91)}Да бисмо извршили чисти прелаз између различитих приказа, поставићемо својство ЦСС з-индек
.виев.нг-леаве {з-индек: 9999} .виев.нг-ентер {з-индек: 8888}Сада је време да дефинишемо наше анимације
Слиде Лефт Анимација
/ * извуците лево * / @кеифрамес слидеОутЛефт {у {трансформ: транслатеКс (-100%)}} @ -моз-кеифрамес слидеОутЛефт {у {-моз-трансформ: транслатеКс (-100%)}} @ -вебкит-кеифрамес слидеОутЛефт {до {-вебкит-трансформ: транслатеКс (-100%)}}Повећајте анимацију
/ * скалирање увис * / @кеифрамес сцалеУп {од {опацити: 0.3 трансформ: сцале (0.8)}} @ -моз-кеифрамес сцалеУп {од {опацити: 0.3 -моз-трансформ: сцале (0.8)}} @ -вебкит- кеифрамес сцалеУп {од {опацити: 0.3 -вебкит-трансформ: сцале (0.8)}}Гурните из десне анимације
улоге и одговорности хадооп програмера
/ * клизајте с десне стране * / @кеифрамес слидеИнРигхт {од {трансформ: транслатеКс (100%)} до {трансформ: транслатеКс (0)}} @ -моз-кеифрамес слидеИнРигхт {од {-моз-трансформ: транслатеКс (100 %)} у {-моз-трансформ: транслатеКс (0)}} @ -вебкит-кеифрамес слидеИнРигхт {из {-вебкит-трансформ: транслатеКс (100%)} у {-вебкит-трансформ: транслатеКс (0)}}Гурните од доње анимације
/ * превуците одоздо * / @кеифрамес слидеИнУп {од {трансформ: транслатеИ (100%)} до {трансформ: транслатеИ (0)}} @ -моз-кеифрамес слидеИнУп {од {-моз-трансформ: транслатеИ (100 %)} у {-моз-трансформ: транслатеИ (0)}} @ -вебкит-кеифрамес слидеИнУп {из {-вебкит-трансформ: транслатеИ (100%)} у {-вебкит-трансформ: транслатеИ (0)}}Ротација и пад анимације
/ * ротирај и падни * / @ -вебкит-кеифрамес ротатеФалл {0% {-вебкит-трансформ: ротатеЗ (0дег)} 20% {-вебкит-трансформ: ротатеЗ (10дег) -вебкит-аниматион-тиминг-фунцтион: еаси- оут} 40% {-вебкит-трансформ: ротатеЗ (17дег)} 60% {-вебкит-трансформ: ротатеЗ (16дег)} 100% {-вебкит-трансформ: транслатеИ (100%) ротатеЗ (17дег)}} @ -моз -кеифрамес ротатеФалл {0% {-моз-трансформ: ротатеЗ (0дег)} 20% {-моз-трансформ: ротатеЗ (10дег) -моз-аниматион-тиминг-фунцтион: еаси-оут} 40% {-моз-трансформ: ротатеЗ (17дег)} 60% {-моз-трансформ: ротатеЗ (16дег)} 100% {-моз-трансформ: транслатеИ (100%) ротатеЗ (17дег)}} @кеифрамес ротатеФалл {0% {трансформ: ротатеЗ (0дег) } 20% {трансформ: ротатеЗ (10дег) анимација-тиминг-фунцтион: еаси-оут} 40% {трансформ: ротатеЗ (17дег)} 60% {трансформ: ротатеЗ (16дег)} 100% {трансформ: транслатеИ (100%) ротатеЗ (17дег)}}Ротирајте новинску анимацију
/ * ротирање новина * / @ -вебкит-кеифрамес ротатеОутНевспапер {то {-вебкит-трансформ: транслатеЗ (-3000пк) ротатеЗ (360дег) опацити: 0}} @ -моз-кеифрамес ротатеОутНевспапер {то {-моз-трансформ: транслатеЗ (-3000пк) ротатеЗ (360дег) непрозирност: 0}} @кеифрамес ротатеОутНевспапер {то {трансформ: транслатеЗ (-3000пк) ротатеЗ (360дег) прозирност: 0}}Примена анимације:
Време је да применимо анимације које смо раније дефинисали
Погледајте 1 анимацију
/ * Погледајте 1 анимацију за напуштање странице и унесите * / .виев1.нг-леаве {-вебкит-аниматион: слидеОутЛефт 0,5с, обе лакоће-у -моз-анимацији: слидеОутЛефт 0,5с, обе једноставне анимације: слидеОутЛефт 0,5с, обе лакоће -ин} .виев1.нг-ентер {-вебкит-аниматион: сцалеУп 0.5с ботх еаси-ин -моз-аниматион: сцалеУп 0.5с ботх еаси-ин аниматион: сцалеУп 0.5с ботх еаси-ин}Погледајте 2 анимације
/ * Погледајте 2 анимације за напуштање странице и унесите * / .виев2.нг-леаве {-вебкит-трансформ-оригин: 0% 0% -вебкит-анимација: ротатеФалл 1с еаси-ин -моз-трансформ-оригин: 0% 0% -моз-анимација: ротатеФалл 1с и једноставан за трансформисање порекла: 0% 0% анимација: ротатеФалл 1с и једноставан за улазак} .виев2.нг-ентер {-вебкит-аниматион: слидеИнРигхт 0.5с ботх еаси-ин моз-анимација: слидеИнРигхт 0,5с, обе једноставне анимације: слидеИнРигхт 0,5с, обје еаси-инПогледајте 3 анимације
/ * Погледајте 3 анимације за напуштање странице и унесите * / .виев3.нг-леаве {-вебкит-трансформ-оригин: 50% 50% -вебкит-аниматион: ротатеОутНевспапер .5с и еаси-ин -моз-трансформ-оригин: 50 % 50% -моз-анимација: ротатеОутНевспапер .5с и једноставан претварајући порекло: 50% 50% анимација: ротатеОутНевспапер .5с и једноставан} .виев3.нг-ентер {-вебкит-аниматион: слидеИнУп 0.5с лакоћа -ин -моз-аниматион: слидеИнУп 0.5с ботх еаси-ин аниматион: слидеИнУп 0.5с ботх еаси-ин}Завршили смо са свим променама. Сада је време да покренете апликацију
Покретање апликације
При покретању апликације, биће вам приказана следећа страница:
Кликните на линкове и видећете како се играју анимације при уласку и изласку са делимичних страница.
шта је набавка у управљању пројектима
Постоје разне друге анимације које се могу користити. Такође, овде може бити огроман скуп могућих ефеката: хттп://тимпанус.нет/Девелопмент/ПагеТранситионс/
Преузмите код и испробајте сами
[буттонлеадс форм_титле = ”Преузми код” редирецт_урл = хттпс: //едурека.вистиа.цом/медиас/ерк9уеп9са/довнлоад? медиа_филе_ид = 80450196 цоурсе_ид = 283 буттон_тект = ”Преузми код”]
Надам се да вам се свидела горња анимација са нгАнимате блогом. Ако желите дубоко заронити у Ангулар ЈС, препоручио бих вам зашто не бисте погледали наш страница курса. Обука за Ангулар ЈС сертификацију у Едуреки учиниће вас стручњаком за Ангулар ЈС кроз сесије под водством инструктора уживо и практичну обуку користећи случајеве стварне употребе.
Имате питање за нас? Молимо вас да то споменете у одељку за коментаре и јавићемо вам се.
Повезани постови:
Рашчлањивање КСМЛ датотека помоћу САКС парсера