Lihat Peralihan di luar Viewport

Peralihan Paparan CSS telah mendarat di Chrome dan (lebih baik atau lebih teruk) tersedia secara meluas kepada kebanyakan pengguna akhir sekarang. Safari tidak jauh ketinggalan, dengan ciri ini tersedia dalam TP dan sekurang-kurangnya Firefox sedang mengusahakannya.

Saya suka betapa mudahnya pelaksanaan peralihan berbilang halaman, tetapi pada masa yang sama, saya menyedari penyair-penyair yang besar dengan mereka: Elemen yang berada di luar port pandangan mula berpusing-pusing.

Blog saya berurusan dengan ini dengan beberapa Javascript. IntersectionObserver menetapkan nama peralihan pandangan dalam sifat tersuai semasa ia kelihatan. Selagi ia tidak kelihatan, harta itu tidak ditetapkan dan peralihan tidak akan dicetuskan. Ia berfungsi, tetapi ia memerlukan HTML, Javascript dan CSS untuk bergantung antara satu sama lain. Dengan semangat mengekalkan pembentangan penting kepada CSS, saya mahukan penyelesaian yang lebih mudah.

Ciri lain yang mungkin boleh membantu telah mendarat di Chrome baru-baru ini: Animasi dipacu tatal. Malangnya, ini hanya tersedia dalam Chrome lagi. Firefox mempunyainya di belakang bendera dan Safari tidak menunjukkan tanda-tanda aktiviti di sini. Tetapi kita boleh kembali dengan anggun, sama ada kepada penyelesaian Javascript yang disebutkan sebelum ini atau malah mengabaikan pengesanan port pandangan dan menunjukkan animasi juga (Ini akan menjadi kes dalam Safari pada masa penulisan).

Peralihan yang mudah

Mari kita susun semuanya, bermula dengan peralihan paparan itu sendiri:

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

<!-- on page1.html: -->
<div data-view-transition>Whoosh!</div>

<!-- on page2.html: -->
<div data-view-transition>Whoosh!</div>

Kini anda akan melihat div daripada page1.html berubah menjadi versinya pada page2.html semasa navigasi. @view-transition at-rule dalam CSS memulakan silang pudar pada keseluruhan dokumen juga. Tempoh peralihan ditetapkan secara lalai kepada 0.4s, tetapi kita boleh menggunakan beberapa baris untuk mengawal ini:

@property --view-transition-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.4s;
}

::view-transition-group(*) {
    animation-duration: var(--view-transition-duration);
}

Tempoh ditetapkan oleh --view-transition-duration Peraturan @property di bahagian atas adalah pilihan sepenuhnya, tetapi ia membenarkan tempoh animasi kembali kepada 0.4s dan bukannya nilai tidak sah apabila kami menetapkan --view- tempoh peralihan: palsu.

Berurusan dengan viewport

Namun, apabila elemen berada di luar port pandangan pada masa peralihan halaman, ia masih akan bernyawa dan kadangkala melepasi atau ke seluruh skrin yang kelihatan tanpa menunjukkan dari mana ia datang atau ke mana ia pergi. Saya mendapati tingkah laku itu sangat menjengkelkan.

Dengan animasi dipacu tatal, kami kini mempunyai alat yang boleh mengawal gaya berdasarkan tatal dan kedudukan relatif port pandang. Jadi kita juga boleh mengawal pencetus untuk peralihan paparan:

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

Animasi rangka kekunci enable-vt tidak boleh beralih dengan lancar daripada tiada kepada sifat tersuai dengan rentetan teks, jadi ia akan melakukan pemotongan keras. Julat animasi tercetus apabila elemen memasuki atau meninggalkan port pandangan walaupun sebahagiannya. Animasi itu sendiri menetapkan --dayakan-lihat-peralihan pada 0.1% dan 99.9% untuk dicetuskan secepat mungkin. Saya ingin mendayakan peralihan paparan sebaik sahaja kita boleh mendapatkan petunjuk tempat animasi bermula atau berakhir.

Akhirnya --dayakan-lihat-peralihan ditetapkan oleh animasi dipacu tatal kepada sama ada tiada atau sifat tersuai baharu yang dipanggil --view-transition-name. Ia ditetapkan antara 0.1% dan 99.9% daripada liputan skrin, melumpuhkan peralihan paparan di atas dan di bawah port pandangan (atau kiri dan kanan, mengikut mana-mana cara anda mahu memegangnya). Sifat baharu ini berguna untuk menetapkan animasi individu pada elemen yang berbeza. Setiap elemen boleh mendapatkan peralihannya sendiri dengan menetapkan nilai unik kepada --view-transition-name.

<div data-view-transition>



<p>Ini perlu dilakukan pada kedua-dua sumber dan halaman sasaran. Jika tiada nilai ditetapkan, nilai lalainya adalah lalai-lihat-peralihan yang mengawal semua elemen peralihan-lihat-data yang tinggal secara seragam.</p>

<h2>
  
  
  Pelaksanaan dunia sebenar
</h2>

<p>Saya menambahkan pelaksanaan ini pada boilerplate CSS kecil saya, Ssstyles. Memberi elemen atribut data-view-transition pada sumber dan halaman sasaran akan membenarkan ia beralih antara kedua-duanya. Memberinya --view-transition-name akan membenarkan ia mempunyai animasi uniknya sendiri, bebas daripada elemen lain yang serupa. Menetapkan --view-transition-duration mengawal tempoh peralihan.</p>


          

            
        

Atas ialah kandungan terperinci Lihat Peralihan di luar Viewport. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!