Halaman ini diterjemahkan oleh Cloud Translation API.

Lihat studi kasus transisi

Swetha Gopalakrishnan

Saurabh Rajpal

Transisi tampilan adalah transisi animasi dan lancar di antara berbagai status halaman web atau UI aplikasi. View Transition API telah dirancang untuk memungkinkan Anda membuat efek ini dengan cara yang lebih sederhana dan berperforma lebih baik daripada sebelumnya. API ini menawarkan beberapa manfaat dibandingkan pendekatan JavaScript sebelumnya, termasuk:

Pengalaman pengguna yang ditingkatkan: Transisi yang lancar dan isyarat visual memandu pengguna melalui perubahan pada UI, sehingga navigasi terasa alami dan tidak terlalu mengganggu.
Kontinuitas visual: Menjaga kontinuitas antar-tampilan akan mengurangi beban kognitif dan membantu pengguna tetap berorientasi dalam aplikasi.
Performa: API mencoba menggunakan resource thread utama sebanyak mungkin yang menghasilkan animasi yang lebih lancar.
Estetika modern: Transisi yang ditingkatkan berkontribusi pada pengalaman pengguna yang menarik dan rapi.

Dukungan Browser

Sumber

Postingan ini adalah bagian dari seri yang membahas cara perusahaan e-commerce meningkatkan kualitas situs mereka menggunakan fitur CSS dan UI baru. Dalam artikel ini, temukan cara beberapa perusahaan menerapkan dan mendapatkan manfaat dari View Transition API.

redBus

redBus selalu berusaha menciptakan paritas sebanyak mungkin antara pengalaman native dan web mereka. Sebelum View Transition API, menerapkan animasi ini di aset web kami merupakan tantangan. Namun, dengan API, kami merasa mudah untuk membuat transisi di beberapa perjalanan pengguna agar pengalaman web lebih mirip aplikasi. Semua ini ditambah dengan manfaat performa menjadikannya fitur yang harus dimiliki untuk semua situs.—Amit Kumar, Senior Engineering Manager, redBus.

Tim telah menerapkan transisi tampilan di beberapa tempat. Berikut adalah contoh kombinasi animasi memudar dan geser masuk pada ikon login di halaman utama.

Transisi tampilan memudar dan bergeser saat pengguna mengklik ikon login di halaman beranda redBus.

Kode

Implementasi ini menggunakan beberapaview-transition-namedan animasi kustom (scale-downdan scale-up). Menggunakan view-transition-name dengan nilai unik akan memisahkan komponen tanda masuk dari bagian halaman lainnya untuk menganimasikannya secara terpisah. Membuat view-transition-name unik baru juga akan membuat ::view-transition-group baru dalam hierarki elemen pseudo (ditampilkan dalam kode berikut), sehingga dapat dimanipulasi secara terpisah dari ::view-transition-group(root) default.

::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)   
└─…

//Code for VT for login
  if (!document.startViewTransition) {
   this.setState(
     {
       closeSigninModal: condition ? true : false
     },
     () => {
       if (closeSigninCb) {
         closeSigninCb();
       }
     }
   );
 } else {
   const transition = document.startViewTransition();
   transition.ready.finally(() => {
     setTimeout(() => {
       this.setState(
         {
           closeSigninModal: condition ? true : false
         },
         () => {
           if (closeSigninCb) {
             closeSigninCb();
           }
         }
       );
     }, 500);
   });
 }

.signin_open {
 view-transition-name: signin;
}

.signin_close  {
 view-transition-name: signinclose;
}

::view-transition-group(signin),
::view-transition-group(signinclose) {
 animation-duration: 0.5s;
}

::view-transition-old(signin) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
 animation-name: -ua-view-transition-fade-in, scale-up;
}

::view-transition-new(signinclose) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}

@keyframes scale-down {
 to {
     scale: 0;
 }
}

@keyframes scale-up {
 from {
     scale: 0;
 }
}

Tokopedia

Tim menggunakan transisi tampilan untuk menambahkan animasi memudar saat pengguna beralih antara thumbnail produk.

Penerapannya sangat mudah, dengan menggunakan startViewTransition, kita langsung mendapatkan transisi memudar yang lebih menyenangkan dibandingkan dengan penerapan sebelumnya tanpa efek apa pun—Andy Wihalim, Software Engineer Senior, Tokopedia.

Sebelum

Setelah

Kode

Kode berikut menggunakan framework React dan menyertakan kode khusus framework, seperti flushSync.Baca selengkapnya tentang bekerja dengan framework untuk menerapkan transisi tampilan. Ini adalah implementasi dasar yang memeriksa apakah browser mendukung startViewTransition dan jika ya, apakah transisi dilakukan. Jika tidak, perilaku akan kembali ke perilaku default.

const handleClick =
  ({ url, index }) =>
  () => {
    if ('startViewTransition' in document) { //check if browser supports VT
      document.startViewTransition(() => {
        flushSync(() => {
          setDisplayImage({ url, index });
          setActiveImageIndex(index);
        });
      });
    } else { //if VT is not supported, fall back to default behavior
      setDisplayImage({ url, index });
      setActiveImageIndex(index);
    }
  };

...

<Thumbnail onClick={handleClick({url, index})} />

Policybazaar

Vertical investasi Policybazaar telah menggunakan View Transition API pada elemen tips bantuan seperti "alasan membeli", sehingga membuatnya menarik secara visual dan meningkatkan penggunaan fitur tersebut.

Dengan menggabungkan Transisi Tampilan, kami menghilangkan kode CSS dan JavaScript berulang yang bertanggung jawab untuk mengelola animasi di berbagai status. Hal ini menghemat upaya pengembangan dan meningkatkan pengalaman pengguna secara signifikan.—Aman Soni, Tech Lead, Policybazaar.

Lihat animasi transisi di CTA "Alasan membeli dari Policybazaar" di halaman listingan investasi.

Kode

Kode berikut mirip dengan contoh sebelumnya. Satu hal yang perlu diperhatikan adalah kemampuan untuk mengganti gaya dan animasi default ::view-transition-old(root)dan::view-transition-new(root). Dalam hal ini, animation-duration default diperbarui menjadi 0,4 detik.

togglePBAdvantagePopup(state: boolean) {
  this.showPBAdvantagePopup = state;

  if(!document.startViewTransition) {
    changeState();
    return;
  }

  document.startViewTransition(() => {changeState();});

  function changeState() {
    document.querySelector('.block_section').classList.toggle('hide');
    document.querySelector('.righttoggle_box').classList.toggle('show');
  }
}

.righttoggle_box{
  view-transition-name: advantage-transition;
}

.block_section{
  view-transition-name: advantage-transition;
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.4s;
}

Hal-hal yang perlu dipertimbangkan saat menggunakan View Transition API

Saat menggunakan beberapa efek transisi tampilan di halaman yang sama, pastikan Anda memiliki nama transisi tampilan yang berbeda untuk setiap efek atau bagian guna mencegah konflik.

Saat transisi tampilan aktif (bertransisi), transisi tersebut akan menambahkan lapisan baru di atas UI lainnya. Jadi, hindari memicu transisi saat mengarahkan kursor, karena peristiwa mouseLeave akan dipicu secara tidak terduga (saat kursor sebenarnya belum bergerak).

Resource

Transisi yang lancar dan sederhana dengan View Transition API
Penjelasan: Transisi Tampilan untuk MPA
Studi Kasus: Navigasi yang lancar dapat dilakukan dengan Transisi Tampilan
Studi Kasus: The Web Can Do What!? | Menampilkan navigasi seperti aplikasi
Proposal Interop: Menjadikan Transisi Tampilan tersedia di seluruh browser
Ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda untuk SPA dan MPA.

Pelajari artikel lain dalam seri ini yang membahas manfaat yang diperoleh perusahaan e-commerce dari penggunaan fitur CSS dan UI baru seperti animasi yang didorong Scroll, popover, kueri penampung, dan pemilih has().