Spa, peralihan elemen bersama, dan menilai semula teknologi

Nolan Lawson mencetuskan beberapa perbincangan apabila dia menggambarkan peralihan yang ketara dari aplikasi satu halaman (SPA S):

Rangka kerja baru seperti Astro, Qwik, dan Elder. Catatan blog membuat pusingan menyenaraikan semua cabaran dengan spa s: sejarah, pengurusan fokus, pemulihan tatal, cmd/ctrl-klik, kebocoran memori, dan lain-lain.

Saya fikir apa yang kurang dibincangkan, bagaimanapun, adalah bagaimana konteks telah berubah dalam beberapa tahun kebelakangan untuk memberi MPA lebih banyak daripada tangan terhadap spa.

Nampaknya beberapa orang benar-benar berpegang pada bahagian pertama kerana Nolan menerbitkan susulan untuk menjelaskan bahawa Spa s jauh dari yang ditakdirkan:

[T] dia menunjukkan jawatan saya bukan untuk menguburkan spa s dan menari di kubur mereka. Saya fikir Spa adalah hebat, saya telah bekerja di banyak daripada mereka, dan saya fikir mereka mempunyai masa depan yang cerah di hadapan mereka. Titik utama saya ialah: jika satu-satunya sebab anda menggunakan spa adalah kerana "ia menjadikan navigasi lebih cepat," maka mungkin sudah tiba masanya untuk menilai semula itu.

Dan ada alasan yang baik dia mengatakannya. Malah, artikel pertama khusus menunjukkan kerja yang dilakukan pada peralihan elemen bersama. Jika mereka bergerak ke hadapan, kami akan mempunyai API untuk mengadakan elemen animasi/peralihan/saiz/kedudukan di pintu masuk halaman dan wujud. Jake Archibald menunjukkan bagaimana ia berfungsi di Google I/O 2022 dan video itu adalah permata.

Jika anda tertanya -tanya bagaimana satu halaman boleh beralih ke yang lain, pelayar mengambil tangkapan skrin halaman keluar dan halaman masuk, kemudian peralihan antara mereka. Oleh itu, ia tidak begitu banyak halaman menjadi satu lagi seperti penyemak imbas yang memegang dua imej supaya dapat menghidupkannya sementara yang lain menghidupkan. Jake mengatakan apa yang berlaku di belakang tempat kejadian ialah struktur DOM dicipta daripada unsur-unsur pseudo yang mengandungi gambar halaman:

 <mansition-container>
  <image-wrapper>
    <imej keluar></imej>
    <imej masuk></imej>
  >
></image-wrapper></mansition-container>

Kita boleh "tangkapan skrin" elemen tertentu jika kita mahu mengasingkannya dan menggunakan animasi yang berbeza dari seluruh halaman:

 .site-header {
  Page-Transition-Tag: Header Site;
  mengandungi: cat;
}

Dan kami mendapat unsur-unsur pseudo yang boleh kami haugh dan menetapkan animasi @keyframe tersuai:

 
<mansition-container>
  
  <image-wrapper>
    
    <imej keluar></imej>
    
    <imej masuk></imej>
  >
></image-wrapper></mansition-container>

Dang, itu pandai seperti!

Ia juga bukti dalam puding hanya berapa banyak HTML, CSS, dan JavaScript terus berkembang dan bertambah baik. Begitu banyak sehingga Jeremy Keith mencadangkan sudah tiba masanya kita menilai semula penghakiman masa lalu kita beberapa teknologi:

Sekiranya anda tidak mengetahui perubahan sejak beberapa tahun kebelakangan ini, mudah untuk berfikir bahawa aplikasi halaman tunggal menawarkan beberapa kelebihan unik yang sebenarnya tidak lagi berlaku. [...] Tetapi pemaju tetap mencurigakan, masih lebih suka mempercayai perpustakaan pihak ketiga berbanding ciri pelayar asli. Mereka membuat keputusan mengenai perpustakaan pada masa lalu. Mereka menilai keadaan sokongan penyemak imbas pada masa lalu. Saya harap mereka akan menilai semula keputusan tersebut.

Bahan -bahan untuk spa secara khusus:

Dalam tahun -tahun kebelakangan ini, ia merasakan seperti web telah muncul dalam lompat: pekerja perkhidmatan, API JavaScript asli, dan rangsangan yang mengagumkan dalam apa yang boleh anda lakukan dengan CSS. Paling penting, interoperabilitas antara pelayar semakin baik dan lebih baik. Sokongan sejagat untuk piawaian web baru tiba pada kadar yang lebih cepat berbanding sebelum ini.

HTML, CSS, dan JavaScript: Ia masih koktel terbaik di bandar. Walaupun ia mengambil masa satu minit untuk mengejarnya.

Atas ialah kandungan terperinci Spa, peralihan elemen bersama, dan menilai semula teknologi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!