Masih Berharap untuk Transisi Halaman Asli yang Lebih Baik

Alangkah baiknya dapat menganimasikan transisi antar halaman jika kita ingin membuka web tanpa menggunakan peretasan atau pilihan arsitektur lengkap untuk mencapainya. Aku bisa membayangkan sebuah API yang akan menjalankan hal-hal, mungkin mengintegrasikan dengan WAAPI , sebelum halaman dibongkar, dan hal-hal lain setelah beban halaman berikutnya dalam. Ini, dengan ol' anchor link sebaliknya reguler dan beban halaman.

Kami memilikionbeforeunload , tetapi saya tidak yakin jenis bagasi apa yang dimiliki. Kami secara teknis dapat membangun transisi halaman sekarang, bahkan tanpa arsitektur aplikasi halaman tunggal, tetapi yang saya inginkan adalah API yang dibuat khusus yang membantu kami melakukannya dengan bersih (fungsi yang dapat dimengerti) dan dengan kedua kinerja (bekerja secepat biasanya dengan mengklik tautan) dan aksesibilitas (seperti penanganan fokus).

Jika Anda tetap membuat aplikasi satu halaman, Anda mendapatkan kebebasan untuk menganimasikan antar tampilan karena halaman tersebut tidak pernah dimuat ulang. Bahayanya di sini adalah Anda mungkin memilih aplikasi satu halaman hanya untuk kemampuan ini, yang saya maksud dengan harus membeli arsitektur situs hanya untuk mencapai ini. Itu terasa seperti pertukaran yang tidak menguntungkan, karena aplikasi satu halaman membawa banyak overhead, seperti masalah perkakas dan aksesibilitas, yang tidak akan Anda butuhkan.

Tanpa aplikasi satu halaman, Anda dapat menggunakan sesuatu seperti Turbo dan animate.css seperti ini . Atau, gaya transisi clip-path() untuk mahakarya Daniel Edan. Mungkin jika pendekatan itu dipasangkan dengan instant.page, itu akan secepat klik tautan internal lainnya.

Ada pemain lain yang mencoba mencari tahu, seperti smoothState.js dan Swup . Triknya adalah: mencegat tindakan untuk pindah ke halaman berikutnya, menjalankan animasi terlebih dahulu, lalu memuat halaman berikutnya, dan menganimasikan halaman baru. Secara teknis, ini memperlambat sedikit, tetapi Anda dapat melakukannya dengan cukup efisien dan gerakan menambah gangguan yang cukup sehingga kinerja yang dirasakan mungkin lebih baik.

Idealnya, kami tidak perlu menganimasikan seluruh halaman tetapi kami dapat memiliki kontrol total untuk membuat transisi yang lebih menarik . Heck, saya melakukan itu satu dekade yang lalu dengan halaman untuk musisi di mana mengklik di sekitar situs hanya memindahkan banyak hal sehingga audio akan terus diputar (dan itu menyenangkan).

Ini akan menjadi tempat yang bagus untuk platform web untuk masuk. Saya ingat Jake mendorongnya beberapa tahun yang lalu, tapi saya tidak yakin apakah itu berhasil. Lalu kita mendapat portal yang… oke? Itu seperti jika Anda memuat iframe pada halaman dan kemudian menghidupkannya untuk mengambil alih seluruh halaman (dan memperbarui URL). Tidak banyak nuansa animasi yang mungkin ada di sana, tetapi Anda pasti dapat menggesek beberapa halaman atau memudarkannya masuk dan keluar (hei ini satu lagi: Highway ), seperti yang dilakukan jQuery Mobile di zaman kuno.


Postingan Still Hoping for Better Native Page Transitions muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

April 22, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *