AngularJS adalah kerangka kerja JavaScript superheroik yang membuat pembuatan Aplikasi Halaman Tunggal (SPA) sangat mudah. Selain itu, AngularJS hadir dengan beberapa modul sudut yang dapat digunakan untuk menciptakan pengalaman pengguna yang luar biasa. Dalam posting ini kita akan melihat bagaimana menggunakan ngAnimate populer untuk menambahkan transisi halaman / animasi ke tampilan sudut.
ngAnimate dapat digunakan dengan berbagai arahan seperti ngRepeat, ngView, ngInclude, ngIf, ngMessage dll.
Dalam posting ini kita akan menggunakan animasi dengan ngView
Di sini kami menggunakan Brackets IDE dari Adobe, tetapi Anda bebas menggunakan yang lain, misalnya Sublime Text, WebStorm dari JetBrains dll.
Catatan : Kami juga akan menggunakan Bootstrap API Bootswatch untuk memberikan halaman HTML kami tampilan yang indah
Struktur Proyek:
Di bawah ini adalah struktur proyek di Brackets IDE
Berikut adalah deskripsi singkat dari setiap file yang digunakan dalam proyek ini
animation.css - file CSS utama tempat kita mendefinisikan animasi halaman kita
bootstrap.min.css - bootstrap bootswatch untuk memberikan file menandai tampilan yang cantik
config.js - File JavaScript utama tempat kami mendefinisikan modul sudut bersama dengan rute dan pengontrol
shellPage.html - Ini adalah halaman shell di mana tampilan lain akan dimuat secara dinamis
java bagaimana mengakhiri program
view1.html, view2.html, view3.html - Ini adalah tampilan parsial yang akan dimuat ke shellPage
Bagaimana animasi diterapkan:
ngAnimate menerapkan kelas CSS ke arahan Angular yang berbeda tergantung pada apakah mereka memasuki atau meninggalkan tampilan
.ng-enter - Kelas CSS ini berlaku pada direktif setiap kali dimuat di halaman
.ng-leave - Kelas CSS ini berlaku pada direktif setiap kali meninggalkan halaman
Mari kita lihat setiap file satu per satu
shellPage.html
shellPage memuat sumber daya yang diperlukan, menerapkan ng-app ke body dan menambahkan ng-view untuk memasukkan tampilan secara dinamis.
config.js
Dalam file konfigurasi, kami mendefinisikan modul sudut kami bersama dengan rute dan pengontrol.
Module transitionApp memiliki dua dependensi: ngAnimate dan ngRoute
var transisiApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (fungsi ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , controller: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', controller:' view3Controller '})}) transitionApp.controller (' view1Controller ', function ($ scope) {$ scope.cssClass =' view1 '}) transitionApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) transitionApp.controller ('view3Controller', function ($ scope) {$ scope.cssClass = 'view3'})Kami telah mendefinisikan tiga tampilan parsial (view1, view2, view3) yang akan dimasukkan ke dalam shellpage tergantung pada URL-nya. Masing-masing Pengendali menyetel atribut cssClass, yang merupakan nama kelas CSS, yang akan diterapkan ke ng-view. Kami akan menentukan animasi kami di kelas CSS ini yang akan memuat setiap halaman dengan animasi yang berbeda.
Halaman parsial view1.html, view2.html, view3.html
Tidak ada banyak halaman parsial, hanya beberapa teks dan link ke tampilan lain
view1.html
Ini adalah View 1
Pemandangan 2 Tampilan 3
view2.html
Ini adalah View 2
Tampilan 1 Tampilan 3
view3.html
Ini adalah View 3
Tampilan 1 Pemandangan 2
Ingatlah bahwa ketiga file HTML ini merupakan halaman parsial yang akan diinjeksikan ke shellPage.html sesuai dengan URL yang telah kita definisikan di file config.js
Menentukan Gaya dan Animasi:
Mari kita hidupkan pandangan kita dengan menerapkan CSS padanya
.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%} / * Warna latar dan teks untuk halaman tampilan parsial (view1, view2, view3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Untuk membuat transisi yang bersih antara tampilan yang berbeda, kita akan mengatur properti CSS z-index
.view.ng-tinggalkan {z-index: 9999} .view.ng-enter {z-index: 8888}Sekarang saatnya menentukan animasi kita
Animasi Geser Kiri
/ * geser ke kiri * / @keyframes slideOutLeft {ke {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {ke {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {ke {-webkit-transform: translateX (-100%)}}Scale Up Animation
/ * scale up * / @keyframes scaleUp {dari {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {dari {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- keyframes scaleUp {dari {opacity: 0.3 -webkit-transform: scale (0.8)}}Geser Masuk dari Animasi Kanan
perbedaan antara pascasarjana dan master
/ * geser dari kanan * / @keyframes slideInRight {dari {transform: translateX (100%)} ke {transform: translateX (0)}} @ -moz-keyframes slideInRight {dari {-moz-transform: translateX (100 %)} menjadi {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {dari {-webkit-transform: translateX (100%)} menjadi {-webkit-transform: translateX (0)}}Slide In dari Animasi Bawah
/ * geser dari bawah * / @keyframes slideInUp {dari {transform: translateY (100%)} ke {transform: translateY (0)}} @ -moz-keyframes slideInUp {dari {-moz-transform: translateY (100 %)} menjadi {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {dari {-webkit-transform: translateY (100%)} menjadi {-webkit-transform: translateY (0)}}Putar dan Animasi Jatuh
/ * rotate and fall * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: kemudahan- 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: kemudahan-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-timing-function: kemudahan-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}Putar Animasi Koran
/ * rotate out koran * / @ -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}}Menerapkan Animasi:
Saatnya menerapkan animasi yang sudah kita tentukan sebelumnya
Lihat 1 Animasi
/ * Lihat 1 animasi untuk keluar halaman dan masukkan * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s keduanya easy-in -moz-animation: slideOutLeft 0.5s keduanya animasi easy-in: slideOutLeft 0.5s keduanya mudah -in} .view1.ng-enter {-webkit-animation: scaleUp 0,5s keduanya easy-in -moz-animation: scaleUp 0,5s baik animasi easy-in: scaleUp 0,5s keduanya easy-in}Lihat 2 Animasi
/ * Lihat 2 animasi untuk keluar dari halaman dan masukkan * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s keduanya easy-in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s keduanya easy-in transform-origin: 0% 0% animation: rotateFall 1s keduanya easy-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s keduanya easy-in - moz-animation: slideInRight 0.5s baik animasi easy-in: slideInRight 0.5s keduanya easy-in}Lihat 3 Animasi
/ * Lihat 3 animasi untuk keluar halaman dan masukkan * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s keduanya easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s keduanya easy-in transform-origin: 50% 50% animation: rotateOutNewspaper .5s keduanya easy-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s keduanya mudah -in -moz-animation: slideInUp 0,5s kedua animasi easy-in: slideInUp 0,5s keduanya easy-in}Kami selesai dengan semua perubahan. Sekarang saatnya menjalankan aplikasi
Menjalankan Aplikasi
Saat menjalankan aplikasi, Anda akan disajikan dengan halaman di bawah ini:
Klik pada tautan dan Anda akan melihat animasi sedang dimainkan, saat memasuki dan meninggalkan sebagian halaman.
bagaimana menggunakan metode split di java
Ada berbagai animasi lain yang bisa digunakan. Juga, serangkaian kemungkinan efek yang luar biasa bisa ada di sini: http://tympanus.net/Development/PageTransitions/
Unduh kodenya dan coba sendiri
[buttonleads form_title = ”Kode Unduhan” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Kode Unduh”]
Saya harap Anda menyukai Animasi di atas dengan blog ngAnimate. Jika Anda ingin mendalami Angular JS, saya sarankan Anda mengapa tidak melihat kami halaman kursus. Pelatihan Angular JS Certification di Edureka akan menjadikan Anda ahli dalam Angular JS melalui sesi yang dipimpin instruktur langsung dan pelatihan langsung menggunakan kasus penggunaan kehidupan nyata.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar dan kami akan menghubungi Anda kembali.
Posting terkait:
Mengurai file XML menggunakan SAX Parser