Halaman ini diterjemahkan oleh Cloud Translation API.

Lihat studi kasus transisi

Swetha Gopalakrishnan

Saurabh Rajpal

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

Pengalaman pengguna yang lebih baik: Transisi yang lancar dan isyarat visual akan memandu pengguna melalui perubahan pada UI, sehingga membuat navigasi terasa alami dan tidak terlalu menganggu.
Kognitif berkelanjutan: Mempertahankan kontinuitas di antara tampilan akan mengurangi beban kognitif dan membantu pengguna tetap berorientasi pada aplikasi.
Performa: API mencoba menggunakan resource thread utama sesedikit mungkin untuk membuat animasi yang lebih halus.
Estetika modern: Transisi yang ditingkatkan berkontribusi pada pengalaman pengguna yang disempurnakan dan menarik.

Dukungan Browser

Sumber

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

redBus

redBus selalu berusaha menciptakan kesetaraan sebanyak mungkin antara pengalaman native dan web. Sebelum View Transitions API, menerapkan animasi ini di aset web sangat sulit. Namun, dengan API, kami mendapati bahwa transisi di berbagai perjalanan pengguna sangatlah intuitif untuk membuat pengalaman web menjadi lebih mirip dengan aplikasi. Semua yang 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 beranda.

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

Code

Implementasi ini menggunakan beberapa animasi view-transition-name dan kustom (scale-downdan scale-up). Menggunakan view-transition-name dengan nilai unik akan memisahkan komponen login dari bagian halaman lainnya untuk menganimasikannya secara terpisah. Membuat view-transition-name unik yang baru juga akan membuat ::view-transition-group baru di hierarki elemen semu (ditampilkan dalam kode berikut), yang memungkinkannya 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 yang memudar saat pengguna beralih di antara thumbnail produk.

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

Sebelum

Setelah

Code

Kode berikut menggunakan framework React dan menyertakan kode khusus framework, seperti flushSync.Baca selengkapnya cara menggunakan framework untuk mengimplementasikan transisi tampilan. Ini adalah implementasi dasar yang memeriksa apakah browser mendukung startViewTransition dan akan melakukan transisi jika ya. Jika tidak, perilaku tersebut 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})} />

Pasar Kebijakan

vertical investasi Policybazaar telah menggunakan View Transitions API pada elemen tip bantuan seperti "mengapa membeli", membuatnya menarik secara visual dan meningkatkan penggunaan fitur tersebut.

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

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

Code

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 Transitions 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 ini 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 yang sebenarnya masih belum bergerak).

Resource

Transisi yang lancar dan sederhana dengan View Transitions API
Penjelasan: Melihat Transisi untuk MPA
Studi Kasus: Navigasi yang lancar dengan Transisi Tampilan
Studi Kasus: Web Dapat Melakukan Apa?? | Menyediakan navigasi seperti aplikasi
Proposal Interop: Membuat Transisi Tampilan tersedia di seluruh browser
Apakah Anda ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda tentang SPA dan MPA.

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