Menerapkan efek animasi javascript dalam aplikasi AngularJS
AngularJS adalah serangkaian kerangka kerja yang kaya untuk membuat aplikasi web satu halaman, membawa semua fungsi yang diperlukan untuk membangun aplikasi yang kaya dan interaktif. Salah satu fitur utama adalah Angular membawa dukungan untuk animasi.
Kami dapat menggunakan animasi dalam beberapa konten aplikasi untuk menunjukkan bahwa beberapa perubahan sedang terjadi. Dalam artikel terakhir saya, saya berbicara tentang dukungan untuk animasi CSS dalam aplikasi sudut. Dalam artikel ini, kita akan melihat cara menggunakan skrip JavaScript untuk menghasilkan efek animasi dalam aplikasi AngularJS.
Dalam sudut, satu -satunya perbedaan antara CSS dan JavaScript adalah definisi mereka. Tidak ada perbedaan yang mencegah animasi yang ditentukan digunakan. Pertama, kita perlu memuat modul Nganimate ke dalam modul root aplikasi kita.
angular.module ('CoursesApp', ['Nganimate']);
Semua acara animasi JavaScript yang akan diproses tetap tidak berubah. Berikut adalah daftar animasi yang didukung langsung dan perilaku berbeda yang sesuai:
Set acara instruksi
NG-View
NG-termasuk
NG-SWITCH
ng-if masuk
Meninggalkan
NG-repeat Enter
Meninggalkan
bergerak
NG-Show
NG-HIDE
NG-Class Add
Menghapus
Daftar di atas sama seperti pada artikel sebelumnya, tetapi tidak menyebutkan kelas CSS yang sesuai karena kami tidak perlu menggunakannya untuk mendefinisikan animasi JavaScript. Semua peristiwa ini hanya akan terjadi setelah modul aplikasi memuat modul Nganimate. Sekarang mari kita lihat bagaimana membuat instruksi ini bergerak.
Sintaks untuk Animasi Sudut Kustom
Berikut adalah kerangka dasar untuk animasi JavaScript khusus:
angular.module ('CoursesApp'). Animation ('. Name-of-animation', function (<suntabSable>) {return {event: function (elem, done) {// logika animasi selesai ();}};});Berikut adalah beberapa poin utama yang perlu diingat saat menulis animasi JavaScript di AngularJS:
1. Nama animasi dimulai dengan titik (.)
2. Semua perilaku animasi menerima dua parameter:
• Objek dalam elemen DOM yang akan menjalankan animasi adalah objek JQLite yang dimuat sebelum AngularJS dimuat, atau objek jQuery.
• Fungsi panggilan balik di akhir animasi. Tindakan yang sesuai dengan instruksi dijeda sampai fungsi panggilan balik dipanggil.
Kami memiliki beberapa perpustakaan JavaScript, seperti JQuery, Greensock, Anima dan beberapa perpustakaan lain yang membuatnya mudah untuk menulis animasi. Agar tetap sederhana, saya menggunakan jQuery untuk membuat animasi di posting ini. Untuk mempelajari beberapa perpustakaan lain, Anda dapat mengunjungi situs web yang sesuai.
Biarkan NG-View bergerak
Animasi yang digunakan pada arahan NG-View berjalan saat beralih tampilan aplikasi AngularJS.
Berikut adalah efek visual yang disebabkan oleh animasi saat tampilan muncul:
courseAppanimations.animation ('. view-slide-in', function () {return {enter: function (element, done) {element.css ({opacity: 0,5, posisi: "relatif", atas: "10px", kiri: "20px"}) .animate ({{top: 0, kiri: 0, Opacity: "20px") .animate ({{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{TOP: 0, 0, 0, 0, 0, 0, 0, 0Di atas menciptakan efek slide-in saat tampilan memasuki layar. Metode selesai dilewatkan sebagai fungsi panggilan balik. Ini untuk menunjukkan bahwa animasi sudah berakhir dan sekarang kerangka kerja AngularJS dapat dilanjutkan dengan tindakan berikutnya.
Perhatikan metode di mana metode animate () dipanggil. Kami tidak perlu mengubah elemen ini menjadi objek jQuery, karena jQuery sudah dimuat sebelum memuat angularjs.
Sekarang kita perlu menerapkan efek animasi ini ke arahan NG-View. Meskipun animasi ini didefinisikan dalam JavaScript, kami menggunakan tag kelas untuk menerapkannya pada arahan target seperti yang disepakati.
Animasi NG-Repeat
Di antara instruksi yang dapat Anda pilih untuk digunakan, NG-Repeat adalah perintah yang sangat penting. Ada dua instruksi operasi dasar lainnya: penyaringan dan penyortiran. Tambahkan, pindahkan, atau hapus instruksi yang sesuai sesuai dengan tindakan yang dilakukan.
Berikut ini menunjukkan penggunaan beberapa animasi dasar, dan ketika perubahan terjadi, Anda dapat melihat efek animasi yang sesuai.
CourseAppanimations.animation ('. RETEGER -ANIMATION', function () {return {enter: function (elemen, done) {console.log ("Memasukkan ..."); var width = element.width (); element.css ({position: 'relative', kiri: -10, opacity: 0}); elements ({{position: 'relative', kiri: -10, opacity: 0}); elementasi ({{position: {left: -10, opacity: 0}); element: {{{position ', left: -10, Opacity: 0}); Function (Element) {element.css ({Posisi: 'Relative', Left: 0, Opacity: 1}); Selesai); } };});Animasi NG-HIDE
Arahan NG-Hide digunakan untuk menambah atau menghapus kelas gaya NG-Hide dari elemen target. Untuk menggunakan animasi, kita sering perlu menambah atau menghapus gaya CSS. Lewati nama kelas ke kelas pemrosesan animasi untuk mencapai efek ini. Ini memungkinkan kami untuk memeriksa kelas ini dan membuat modifikasi yang sesuai untuk kode.
Berikut ini adalah kode sampel animasi, menggunakan arahan NG-hide untuk mencapai efek tampilan yang memudar dan bertahap dari elemen:
courseAppanimations.animation ('. Hide-animation', function () {return {beForeAddClass: function (element, className, done) {if (classname === 'ng-hide') {element.animate (oPacity: 0}, 500, Done);} lainnya {), {{Opacity: 0}, 500, Done);} Lain {Done (); (className === 'ng-hide') {element.css ('opacity', 0);Biarkan perintah khusus bergerak
Untuk membuat arahan khusus hidup, kita perlu menggunakan layanan $ animate. Meskipun layanan $ animate adalah bagian dari kerangka kerja inti AngularJS, Nganimate harus dimuat sebelum layanan ini dapat memainkan peran terbesarnya.
Menggunakan contoh yang sama dari artikel sebelumnya, kami akan menyajikan daftar kursus satu halaman. Kami membuat perintah untuk menampilkan detail kursus di kisi, dan konten di kisi akan berubah saat mengklik tautan "Lihat statistik". Mari kita tambahkan animasi untuk menyajikan efek konversi ini kepada pengguna.
Ketika animasi transformasi dimulai, kami akan menambahkan tag kelas CSS, dan pada akhirnya, menghapus tag kelas ini. Berikut adalah kode sampel untuk arahan ini:
app.directive ('coursedetails', function ($ animate) {return {scope: true, templateUrl: 'coursedetails.html', link: function (scope, elem, attrs) {scope.viewDetails = true; elem.find ('tombol'). BIND ('function', function, function, function ', function,' function, 'function,' function ('function,' function ('function (' function ('function (' function ('function (' function ('function (' function ('function (' function ('function (' function ('function ({function). () {elem.removeclass ("switching");Seperti yang Anda lihat, kami melakukan aksi ini di akhir animasi. Di alat pengembang browser, ketika kita melihat elemen arahan, kita akan menemukan bahwa dua tag kelas, switching-aktif dan switching-add, sedang ditambahkan dengan cepat dan kemudian dihapus. Kita dapat melihat efek animasi dengan mendefinisikan gaya konversi CSS atau animasi JavaScript khusus. Berikut adalah gaya konversi CSS sederhana yang dapat digunakan untuk instruksi yang disebutkan di atas. Untuk kesederhanaan, kami menghapus awalan spesifik:
.det-anim.switching {transisi: semua linear 1s; Posisi: kerabat; Opacity: 0,5; Kiri: -20px;}Atau, berikut adalah animasi yang ditulis oleh jQuery yang dapat digunakan untuk instruksi yang sama:
CourseAppanimations.animation ('. JS-anim', function () {return {beForeAddClass: function (element, className, done) {if (className === 'switching') {element.animate (oPacity: 0}, 1000, function () {element.css (oPacity ({{Opacity: 0}, function () {{{{{{), {{{{) ({{) {{{{) {{{{) {{{{{) ({{{{) ({{{{) ({{) {{{{{) ({{) {) {) { }}}});Dalam animasi ini, jika dapat diterapkan pada instruksi bawaan, itu juga dapat diterapkan pada instruksi khusus:
<Div kursus-detail>/div>
Anda dapat melihat efek dari semua animasi di atas yang berjalan pada halaman contoh.
sebagai kesimpulan
Animasi, bila cocok dan digunakan dengan benar, akan membawa kemarahan pada aplikasi. Seperti yang telah kita lihat, AngularJS memberikan berbagai dukungan untuk animasi CSS dan JavaScript. Anda dapat memilih salah satunya berdasarkan situasi tim.
Namun, menggunakan terlalu banyak animasi akan memperlambat aplikasi, yang akan membuat aplikasi terlihat tidak manusiawi bagi pengguna. Karena itu, Anda harus berhati -hati dan dioptimalkan untuk menggunakan senjata ini.