Rumah > Artikel > hujung hadapan web > Apakah perbezaan antara animasi css3 dan animasi jquery
Perbezaan antara animasi css3 dan animasi jquery: 1. css3 boleh menetapkan animasi 3d, tetapi jquery tidak dapat merealisasikan animasi 3d; 2. animasi matriks 2d css adalah lebih cekap, dan animasi atribut lain kurang cekap margin dan kiri , kecekapan animasi matriks simulasi atas adalah rendah, dan kecekapan animasi atribut lain adalah tinggi.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&jquery3.2.1, komputer Dell G3.
Perbandingan kelebihan dan kekurangan animasi css3 dan animasi jquery:
Animasi CSS3 menyediakan animasi 2D, 3D dan konvensional antara muka hartanah , ia boleh berfungsi pada mana-mana atribut mana-mana elemen pada halaman animasi CSS3 ditulis dalam bahasa C Ia adalah animasi peringkat sistem, jadi kecekapannya pasti lebih tinggi daripada animasi simulasi js. ?
Selepas ujian kami, kami mendapati animasi CSS3 dan animasi simulasi javascript mempunyai perbezaan berikut:
1 Animasi 3D CSS tidak boleh dilaksanakan dalam
Animasi 3D CSS3 ialah fungsi yang sangat berkuasa dalam CSS3, kerana ia berfungsi dalam ruang tiga dimensi, jadi js tidak boleh mensimulasikan animasi 3D seperti CSS3 Sudah tentu, adakah senario aplikasi sebenar animasi 3D ini sangat luas? Patut difikirkan...
2 Kecekapan animasi matriks 2D CSS adalah lebih tinggi daripada animasi matriks yang disimulasikan oleh js menggunakan margin dan kiri, atas
The Animasi 2D CSS3 merujuk kepada perubahan Transform matriks 2D, seperti penskalaan\ubah bentuk\x-paksi\y-paksi, sudah tentu js tidak boleh melakukan animasi ubah bentuk. Ambil animasi koordinat sebagai contoh Selepas ujian kami, kami mendapati bahawa menggunakan transformasi CSS3 untuk mencipta animasi translateXY hampir 700mm lebih pantas daripada kedudukan
kiri dan kedudukan kanan dalam js. Dan ia juga jauh lebih lancar daripada animasi js .
Kecekapan sifat animasi biasa lain CSS3 adalah lebih rendah daripada animasi yang disimulasikan oleh js
Sifat animasi biasa di sini merujuk kepada: ketinggian, lebar, kelegapan, border-width ,color…..
Kami pernah menguji menukar elemen DOM dari height:0 kepada height:100 dalam Android HTC Kami menggunakan jQuery
peralihan dan animasi CSS3 keputusan menunjukkan bahawa penyamakan CSS3 dan animasi kedua-duanya 500mm lebih perlahan daripada jQuery
animate! Ciri animasi biasa lain adalah 400-500mm lebih perlahan daripada animasi jQuery!.
(Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Apakah perbezaan antara animasi css3 dan animasi jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!