Lihat studi kasus transisi

Swetha Gopalakrishnan

Saurabh Rajpal

Transisi tampilan adalah transisi yang dianimasikan dan lancar antara berbagai status UI aplikasi atau halaman web. View Transition API telah didesain untuk memungkinkan Anda membuat efek ini dengan cara yang lebih mudah dan berperforma tinggi daripada yang mungkin dilakukan 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 UI, sehingga navigasi terasa alami dan tidak terlalu mengganggu.
• Kontinuitas visual: Menjaga rasa kontinuitas antar-tampilan mengurangi beban kognitif dan membantu pengguna tetap berorientasi dalam aplikasi.
• Performa: API mencoba menggunakan sesedikit mungkin resource thread utama untuk membuat animasi yang lebih lancar.
• Estetika modern: Transisi yang ditingkatkan berkontribusi pada pengalaman pengguna yang lancar dan menarik.

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 berupaya menciptakan kesamaan sebanyak mungkin antara pengalaman web dan aplikasi native mereka. Sebelum View Transition API, penerapan animasi ini di aset web kami cukup sulit. Namun, dengan API, kami merasa intuitif untuk membuat transisi di beberapa perjalanan pengguna guna membuat pengalaman web lebih mirip aplikasi. Semua ini, ditambah dengan manfaat performa, menjadikannya fitur yang wajib dimiliki semua situs.—Amit Kumar, Senior Engineering Manager, redBus.

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

Kode

Implementasi ini menggunakan beberapaview-transition-namedan animasi kustom (scale-downdan scale-up). Menggunakan view-transition-name dengan nilai unik memisahkan komponen login dari halaman lainnya untuk menganimasikannya secara terpisah. Membuat view-transition-name unik baru juga akan membuat ::view-transition-groupbaru di hierarki elemen semu (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 di antara thumbnail produk.

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

Sebelum

Setelah

Kode

Kode berikut menggunakan framework React dan menyertakan kode khusus framework, seperti flushSync.Baca selengkapnya tentang cara menggunakan framework untuk menerapkan transisi tampilan. Ini adalah penerapan dasar yang memeriksa apakah browser mendukung startViewTransition dan jika ya, melakukan transisi. Jika tidak, perilaku default akan diterapkan.

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

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

Dengan menggabungkan Transisi View, 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.

Kode

Kode berikut mirip dengan contoh sebelumnya. Salah 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 view-transition-name yang berbeda untuk setiap efek atau bagian guna mencegah konflik.

Saat transisi tampilan aktif (bertransisi), transisi 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 masih belum bergerak).

Resource

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

Baca artikel lain dalam seri ini yang membahas manfaat penggunaan fitur CSS dan UI baru seperti Animasi yang digerakkan scroll, popover, kueri penampung, dan pemilih has() bagi perusahaan e-commerce.

• Mengapa Kemampuan UI Web penting untuk situs e-commerce Anda?
• Studi kasus animasi yang digerakkan scroll
• Studi kasus Popover API
• Studi kasus Kueri Penampung
• Studi kasus pemilih:has()