Transisi Antar-Halaman dengan View Transitions API

/* Menentukan nama identitas transisi pada elemen tertentu */
.foto-produk-detail {
    view-transition-name: produk-aktif;
}

/* Kustomisasi durasi animasi transisi tampilan */
::view-transition-old(produk-aktif),
::view-transition-new(produk-aktif) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Di JavaScript: */
function gantiKonten(kontenBaru) {
    if (!document.startViewTransition) {
        document.body.innerHTML = kontenBaru;
        return;
    }
    document.startViewTransition(() => {
        document.body.innerHTML = kontenBaru;
    });
}