Ketika HTML5 dan CSS3 secara bertahap menjadi arus utama, saya sangat terbiasa menggunakan JS untuk membuat beberapa animasi sederhana. Karena di browser desktop, tidak semua mendukung CSS3. Pengguna juga sangat aneh. Tidak setiap pengguna dapat dibudidayakan. Selalu ada banyak orang yang berpikir bahwa Win7.win8 tidak berguna seperti XP. Tetapi ponselnya sangat berbeda, dan browser seluler mendukung HTML5 dan CSS3 dengan sangat baik. Namun, kemampuan pemrosesan perangkat keras ponsel sangat terbatas. Saat ini, ketika ponsel quad-core dan octa-core merajalela, masih ada orang yang menggunakan ponsel dual-core atau single-core seperti saya. Meskipun JS baik, saya tidak memiliki banyak kontak dengan Anda, jadi saya tidak bisa menyesuaikan perasaan itu dengan baik. Sapuan halaman sederhana berjalan dengan sangat lancar di pc i7, tetapi macet, tergagap, tergagap, tergagap, dan tergagap di ponsel dual-core saya. Ini sangat menyedihkan. Untuk alasan ini, saya juga sudah lama mencari dan membaca banyak. Akhirnya, sebelum saya menetap, saya menemukan metode yang relatif sederhana: Gunakan CSS3 untuk mengeksekusi animasi.
Di masa lalu, selain fungsi animasi JQuery seperti animasi, setTimeout dan setInterval digunakan untuk mengulang untuk mengubah sifat -sifat elemen seperti margin, lebar, atas, dll. Justru inilah yang membuat saya bingung.
Pertama -tama, SetTimeout, SetInterval tidak dapat dieksekusi sepanjang waktu hanya dengan mengatur 0ms. Saya pernah secara tidak sengaja menemukan rahasia ini saat men -debug di iscroll. Ternyata perhitungan penundaan timer bergantung pada jam bawaan browser, dan keakuratan jam tergantung pada frekuensi pembaruan jam. Interval pembaruan antara IE8 dan versi IE sebelumnya adalah 15,6 milidetik. Sudah berakhir, saya pikir itu melakukan perpindahan 1px dalam 10ms, dan tidak dapat melakukan ini tepat waktu.
Dan apa yang terjadi dengan kartu itu? Kartu, karena kodenya tidak ditulis dengan baik. Lagi pula, JS saling berhadapan, dan begitu ada tindakan yang memakan waktu, UI mungkin tidak merespons. Meskipun kami menggunakan SetTimeout, justru karena SetTimeout yang membuat kami terlihat seperti antarmuka tidak mati, tetapi aksinya tidak mulus. Karena setelah eksekusi SetTimeout kali ini, sebelum eksekusi berikutnya, tindakan lain yang memakan waktu dapat ditemui dalam interval tengah, sehingga pelaksanaan SetTimeout akan tidak terbatas. Lalu apa? Kartu! Namun, ada alasan lain mengapa kartu tersebut dapat secara tidak sengaja memicu tata letak browser (yaitu: relayout) saat mengubah atribut asli. Pertanyaan ini memakan waktu, tetapi memakan waktu. Ini memakan waktu, tetapi seringkali dapat diabaikan. Tetapi berkali -kali tidak bisa diabaikan.
Selain dua paragraf di atas, ada masalah lain, yaitu, pada banyak ponsel, selalu terasa seperti bingkai demi bingkai, dan mungkin juga bingkai berdasarkan bingkai panjang dan pendek. Ini adalah ritme yang dapat merusak semua orang. Mengapa ini terjadi? Masih ada hubungannya dengan keterlambatan SetTimeout. Buang bingkai. Masalah ini melibatkan frekuensi penyegaran monitor. Ini terlalu rumit.
Akhirnya, CSS3 dipilih, JS secara dinamis mengubah atribut elemen, dan transisi digunakan untuk mengontrol waktu eksekusi animasi. Misalnya:
Salinan kode adalah sebagai berikut:
<div id = "test" style = "Transisi: semua kemudahan 1; lebar: 100px;" >/Div>
JS:
Salinan kode adalah sebagai berikut:
$ ("#tes"). Lebar (200);
Dengan cara ini, setelah 1 detik, lebar div ini akan menjadi 200px. Ini tidak seperti Sun Wukong menjadi lebih besar dalam sekejap, dan dia perlahan -lahan bergegas tanpa macet atau berhenti. Dan ada keuntungan menggunakan animasi CSS, itu tidak terpengaruh oleh JS yang memakan waktu. Meskipun utas UI dan utas JS saling eksklusif di browser, ini tidak berlaku untuk animasi CSS, dan banyak browser juga dapat memungkinkan akselerasi perangkat keras (seperti chrome). Meskipun browser ulang tidak terlalu jelas dalam situasi biasa, tata letak kembali skala besar harus dihindari. jadi tambahkan -webkit -transform: translatez (0); atau -webkit -transform: translate3d (0,0,0); sehingga browser akan membuat lapisan ini secara mandiri. Bahkan jika letak ulang tidak bisa dihindari, area ini lebih kecil. Ini memang keputusan yang sangat bijak untuk menggunakan terjemahan untuk menggantikan margin.
Akhirnya, beberapa perubahan umum akan memicu sifat relayout:
Salinan kode adalah sebagai berikut:
lebar
tinggi
lapisan
batas
menampilkan
lebar perbatasan
berbatasan
Min-tinggi
Di atas adalah semua konten yang dijelaskan dalam artikel ini. Saya harap ini akan membantu semua orang untuk mempelajari JavaScript dan CSS3. Pada saat yang sama, tambahkan beberapa kekurangan dan pahami.