Menambah animasi CSS ke aplikasi AngularJS

mata teras

AngularJS menyokong animasi CSS dan JavaScript, dan disyorkan untuk menggunakan animasi CSS kerana penyemak imbas akan mengurangkan keutamaannya dan tidak akan menghalang benang pemprosesan.
Untuk menggunakan animasi dalam AngularJS, anda perlu memasukkan perpustakaan
• dan menambah modul angular-animate.js sebagai kebergantungan. Perpustakaan ini menambah sokongan animasi untuk arahan seperti ngAnimate, ng-view, ng-repeat, ng-show dan ng-hide. ng-class
Animasi dapat meningkatkan pengalaman pengguna dengan meningkatkan kesan peralihan, menonjolkan perubahan elemen dan mengawal paparan elemen. Mereka boleh digunakan menggunakan kelas dan sifat tertentu dalam CSS dan boleh disesuaikan untuk membuat kesan unik.

AngularJS direka untuk membina aplikasi mengikat data web yang kaya. Animasi aplikasi ini seperti menambah bahan -bahan ke pizza kegemaran anda. Animasi bukan sahaja mencantikkan UI, tetapi juga memudahkan pengguna digunakan. Sekeping animasi kecil dalam aplikasi boleh meningkatkan kekayaannya, yang sukar dicapai dalam kes lain.

Sekarang, dengan kuasa rangkaian, terdapat banyak cara untuk membuat animasi. Sehingga baru -baru ini, animasi hanya dilaksanakan melalui JavaScript. Tetapi sekarang semua pelayar arus perdana menyokong CSS3 dengan baik, kami boleh menggunakan CSS hanya untuk menghidupkan laman web kami.

AngularJS 1.1.5 Versi beta mula menyokong animasi. Ia melalui banyak perubahan sebelum versi stabil ciri ini dikeluarkan dalam AngularJS 1.2. Ia sangat mudah untuk menambah atau mengeluarkan sokongan animasi dalam aplikasi sudut. Perpustakaan ini memberikan sokongan yang hebat untuk animasi berasaskan CSS dan JavaScript berasaskan CSS. Walaupun animasi boleh ditulis dalam JavaScript, animasi CSS disyorkan. Ini kerana penyemak imbas mengurangkan keutamaan animasi CSS dan mereka tidak menghalang benang pemprosesan apabila benang dapat melakukan tindakan penting.

Dalam artikel ini, kita akan belajar bagaimana menggunakan animasi CSS untuk membuat tingkah laku arahan terbina dalam AngularJs lebih menarik. Skop artikel ini tidak termasuk ciri animasi yang disokong oleh CSS. Anda boleh merujuk kepada saluran CSS di SitePoint untuk maklumat lanjut.

pemula

Untuk menggunakan animasi, kita perlu memasukkan perpustakaan

dan menambah modul angular-animate.js sebagai kebergantungan dalam modul seperti yang ditunjukkan di bawah: ngAnimate

angular.module('coursesApp', ['ngAnimate']);

Perpustakaan ini menambah sokongan animasi untuk peristiwa yang ditentukan pada arahan berikut:

指令	事件
ng-view	enter、leave
ng-include	enter、leave
ng-switch	enter、leave
ng-if	enter、leave
ng-repeat	enter、leave、move
ng-show	add、remove
ng-hide	add、remove
ng-class	add、remove

Peristiwa -peristiwa ini dijana secara automatik apabila sebarang perubahan kepada keadaan arahan berlaku. Harus diingat bahawa peristiwa -peristiwa ini hanya akan dihasilkan apabila modul ngAnimate diluluskan sebagai kebergantungan modul permohonan. Apabila peristiwa -peristiwa ini dipecat, mereka menambah kelas CSS ke elemen yang digunakan. Nama yang sepadan dengan kelas CSS disebutkan dalam jadual di atas. Seperti yang anda lihat, kami bebas untuk menentukan apa yang berlaku apabila dan selepas peristiwa berlaku.

Animasi ng-view

Apabila pengguna menavigasi dari satu pandangan ke yang lain, laluan itu menyelesaikan klien dan sebahagian halaman memuat kandungan baru. Ini berlaku dengan cepat dan kadang -kadang pengguna mungkin merasakan bahawa perubahan pandangan terlalu tiba -tiba. Animasi dalam langkah ini akan melancarkan peralihan.

Rujuk jadual di atas, kita melihat bahawa

akan menaikkan dua peristiwa apabila pandangan berubah. Mari gunakan gaya berikut apabila pandangan berubah: ng-view

angular.module('coursesApp', ['ngAnimate']);

CSS di atas menggunakan peralihan pelonggaran kepada unsur -unsur yang digunakan, dengan tempoh peralihan 1 saat. Walau bagaimanapun, gaya di atas sahaja tidak mempunyai kesan, kerana kami tidak menentukan atribut elemen yang akan berubah semasa peralihan. Mari kita memanipulasi nilai -nilai beberapa atribut CSS:

.view-slide-in.ng-enter {
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;

  opacity: 0.5;
  position: relative;
  opacity: 0;
  top: 10px;
  left: 20px;
}

Apa yang perlu kita lakukan sekarang ialah memohon kelas

ke arahan view-fade. ng-view

.view-slide-in.ng-enter {
  opacity: 0;
}
.view-slide-in.ng-enter.ng-enter-active {
  top: 0;
  left: 0;
  opacity: 1;
}
.view-slide-in.ng-leave.ng-leave-active {
  top: 5px;
  left: 5px;
  opacity: 1;
}
.view-slide-in.ng-leave {
  top: 0;
  left: 0;
  opacity: 0;
}

Sekarang, apabila anda menavigasi dari satu pandangan ke yang lain, anda akan dapat melihat kesan gelongsor. Anda boleh memohon sebarang peralihan dan juga menentukan animasi kerangka utama anda sendiri. Anda boleh menggunakan peralihan pandangan dalam demo anda untuk mendapatkan pemahaman yang lebih baik.

Animasi ng-repeat Hampir mustahil untuk mengelakkan menggunakan

dalam aplikasi AngularJS. Kami akhirnya menggunakan kebanyakan ciri Arahan ini, seperti mengemas kini model, menambah atau mengeluarkan item ke koleksi, memohon item penyortiran dan penapisan. Semasa kami melakukan operasi ini, item dalam arahan sentiasa dipindahkan dan berubah.

ng-repeat Mari kita gunakan peralihan linear pada kelegapan elemen untuk melihat perubahan dalam projek.

Sekarang, apabila melakukan apa -apa dalam senarai, kita akan melihat campuran item yang pudar dan kesan jitter sedikit. Kesan ini disebabkan oleh mengubah nilai atribut kedudukan di sebelah kiri projek dalam kelas

<div ng-view class="view-slide-in"></div>

yang dibuat di atas. Sapukan sebarang penapisan rawak dan penyortiran ke senarai item dalam demo dan perhatikan tingkah laku unsur -unsur.

ng-move

Animasi

Animasi ng-hide adalah serupa dengan animasi

. Satu -satunya perbezaan ialah kita perlu memohon kelas

dan ng-hide dan bukan ng-view dan ng-add. Mari buat projek memudar masuk atau keluar apabila arahan ng-remove menunjukkan atau menyembunyikannya. Animasi yang sama boleh digunakan untuk ng-enter dengan membalikkan acara. ng-leave ng-hide ng-show Lihat animasi ini dalam demo. Kotak semak di sebelah kanan halaman pertama menyembunyikan atau menunjukkan beberapa item dalam pendua.

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
  -webkit-transition: all linear 1s;
  -moz-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;

  position: relative;
  left: 5px;
}
.repeat-animation.ng-enter {
  opacity: 0;
}
.repeat-animation.ng-enter.ng-enter-active {
  opacity: 1;
}
.repeat-animation.ng-leave {
  opacity: 1;
}
.repeat-animation.ng-leave.ng-leave-active {
  opacity: 0;
}
.repeat-animation.ng-move {
  left: 2px;
  opacity: 0.5;
}
.repeat-animation.ng-move.ng-move-active {
  left: 0;
  opacity: 1;
}

Kesimpulan

Sebagai pelayar web menjadi semakin kuat, pelanggan kami mengharapkan kami memanfaatkan ciri -ciri ini dan memberikan produk yang berkualiti kepada mereka. Sokongan animasi dalam CSS adalah ciri yang sangat popular. Menulis dan menggunakan animasi dengan CSS adalah lebih mudah daripada menulis beberapa baris kod JavaScript untuk mencapai perkara yang sama. Saya harap anda dapati tutorial ini berguna dan berharap dapat mendengar maklum balas anda.

Soalan Lazim untuk menambah animasi CSS dalam aplikasi AngularJS

(bahagian Soalan Lazim ditinggalkan di sini kerana artikel itu terlalu panjang dan tidak sepadan dengan matlamat asal pseudo. Kandungan bahagian FAQ sangat mirip dengan teks asal, dan pseudo-asalnya sukar, Jadi mengekalkan ia akan mengurangkan kesan pseudo-asal.)

Atas ialah kandungan terperinci Menambah animasi CSS ke aplikasi AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!