Ringkasan penggunaan javascript dan css3 animation together_javascript kemahiran

Apabila Html5 dan CSS3 beransur-ansur menjadi arus perdana, saya masih terbiasa menggunakan js untuk membuat beberapa animasi mudah. Kerana pada pelayar desktop, tidak semua menyokong css3. Pengguna juga sangat pelik. Tidak setiap pengguna boleh membangunkan tabiat pengguna. Selalu ada ramai orang yang merasakan bahawa win7.win8 tidak berguna seperti xp. Tetapi aspek telefon mudah alih sangat berbeza. Sokongan penyemak imbas mudah alih untuk HTML5 dan CSS3 masih sangat baik. Walau bagaimanapun, keupayaan pemprosesan perkakasan telefon mudah alih adalah sangat terhad. Hari ini, apabila telefon mudah alih empat teras dan lapan teras berleluasa, masih ada orang seperti saya yang menggunakan telefon mudah alih dwi teras atau teras tunggal. Walaupun js bagus, saya tidak mempunyai banyak pendedahan kepadanya, jadi saya tidak dapat menyesuaikan perasaan dengan baik. Slaid halaman mudah berjalan dengan lancar pada PC i7, tetapi pada telefon dwi-teras saya, ia membeku, membeku, membeku dan membeku. Sangat menyedihkan. Atas sebab ini, saya telah lama mencarinya dan banyak membaca. Akhirnya, tidak lama dahulu, saya menemui kaedah yang agak mudah: gunakan css3 untuk melaksanakan animasi.

Pada masa lalu, sebagai tambahan kepada animasi Jquery dan fungsi animasi lain, lebih ramai orang menggunakan setTimeout dan setInterval untuk menukar jidar, lebar, atas dan atribut lain unsur secara kitaran. Justru kerana inilah saya keliru.

Pertama sekali, setTimeout dan setInterval tidak dilaksanakan secara berterusan jika anda menetapkannya kepada 0ms. Saya secara tidak sengaja menemui rahsia ini semasa menyahpepijat dalam iscroll. Ternyata pengiraan kelewatan Pemasa bergantung pada jam terbina dalam penyemak imbas, dan ketepatan jam bergantung pada kekerapan kemas kini jam. Selang kemas kini untuk IE8 dan versi IE sebelumnya ialah 15.6 milisaat. Ia sudah berakhir, saya mahu ia melakukan anjakan 1px dalam 10ms, tetapi ia tidak dapat melakukannya tepat pada masanya.

Dan apa yang berlaku pada kad itu? Tersekat kerana kod tidak ditulis dengan baik. Lagipun, js adalah satu utas Setelah terdapat tindakan yang memakan masa, UI mungkin tidak bertindak balas. Walaupun kami menggunakan setTimeout, ia adalah tepat kerana setTimeout bahawa antara muka kelihatan tidak stabil tetapi tidak lancar. Kerana selepas pelaksanaan setTimeout kali ini, satu lagi tindakan yang memakan masa mungkin akan ditemui dalam selang sebelum pelaksanaan seterusnya, maka pelaksanaan setTimeout akan ditangguhkan selama-lamanya. Kemudian apa? Kad! Walau bagaimanapun, sebab seterusnya untuk kad adalah untuk mencetuskan Reka Letak penyemak imbas secara tidak sengaja (iaitu: relayout) apabila menukar atribut asal. Masalah ini dikatakan memakan masa, tetapi ianya memakan masa Ia dikatakan memakan masa, tetapi dalam banyak kes ia boleh diabaikan. Tetapi banyak kali ia tidak boleh diabaikan.

Selain dua perenggan di atas, terdapat satu lagi masalah, iaitu, pada banyak telefon bimbit, ia sentiasa terasa seperti satu demi satu bingkai, dan satu bingkai mungkin lebih panjang dan satu lagi lebih pendek. Ini betul-betul irama yang boleh buat orang lumpuh. Mengapa ini berlaku? Ia masih ada kaitan dengan kelewatan masa tamat. Bingkai terjatuh. Masalah ini melibatkan kekerapan muat semula monitor. Ia terlalu rumit.

Akhirnya, saya memilih CSS3, js menukar atribut elemen secara dinamik dan menggunakan peralihan untuk mengawal masa pelaksanaan animasi. Contohnya:

Salin kod Kod adalah seperti berikut:

js:

Salin kod Kod adalah seperti berikut:

$("#test").lebar(200);

Dengan cara ini, lebar div ini akan menjadi 200px selepas 1 saat. Ia tidak seperti Sun Wukong berubah menjadi pic dan tiba-tiba menjadi lebih besar, dia perlahan-lahan bergerak ke hadapan tanpa tersekat. Dan terdapat kelebihan untuk menggunakan animasi css, ia tidak dipengaruhi oleh js yang memakan masa. Walaupun utas UI dan utas js dalam penyemak imbas adalah saling eksklusif, ini tidak berlaku untuk animasi css, dan banyak penyemak imbas juga boleh mendayakan pecutan perkakasan (seperti Chrome). Walaupun penyampaian pelayar biasanya tidak begitu jelas, anda harus cuba mengelakkan penyampaian berskala besar. Jadi tambahkan -webkit-transform: translateZ(0); atau -webkit-transform: translate3d(0,0,0); Walaupun susun atur semula tidak dapat dielakkan, kawasan itu akan menjadi lebih kecil dengan cara ini. Menggunakan terjemah dan bukannya margin sememangnya satu keputusan yang sangat bijak.

Akhir sekali, berikut ialah beberapa sifat yang biasa digunakan yang akan mencetuskan penyampaian apabila perubahan berlaku:

Salin kod Kod adalah seperti berikut:

lebar
ketinggian
​Padding
margin
paparan
​lebar sempadan
sempadan
​tinggi min

Di atas adalah semua kandungan yang diterangkan dalam artikel ini Saya harap ia akan membantu semua orang dalam mempelajari javascript dan CSS3 Pada masa yang sama, sila tambahkan sebarang kekurangan.