Halaman ini diterjemahkan oleh Cloud Translation API.

Lihat studi kasus transisi

Swetha Gopalakrishnan

Saurabh Rajpal

Transisi tampilan adalah transisi animasi dan tanpa hambatan di antara berbagai status halaman web atau UI aplikasi. Tujuan Lihat Transition API telah didesain untuk memungkinkan Anda membuat efek ini dengan cara yang lebih mudah dan efektif daripada sebelumnya dilakukan. API ini menawarkan banyak manfaat dibandingkan Pendekatan JavaScript mencakup:

Pengalaman pengguna yang lebih baik: Transisi yang mulus dan isyarat visual memandu pengguna melalui perubahan di UI, membuat navigasi terasa alami dan tidak terlalu mengagetkan.
Kontinuitas visual: Mempertahankan kesinambungan antartampilan mengurangi beban kognitif dan membantu pengguna tetap berorientasi pada aplikasi.
Performa: API mencoba menggunakan resource thread utama sesedikit mungkin memungkinkan yang menghasilkan animasi yang lebih halus.
Estetika modern: Transisi yang lebih baik berkontribusi pada tampilan yang elegan dan pengalaman pengguna yang menarik.

Dukungan Browser

Sumber

Postingan ini merupakan bagian dari membahas bagaimana perusahaan e-commerce meningkatkan situs web mereka menggunakan fitur CSS dan UI baru. Dalam artikel ini, temukan cara beberapa perusahaan menerapkan dan memanfaatkan View Transition API.

redBus

redBus selalu berupaya menciptakan sebanyak mungkin kesamaan antara native dan web yang sebaik mungkin. Sebelum View Transition API, terapkan animasi pada aset web merupakan hal yang sulit. Namun dengan API, kami menemukan intuitif untuk membuat transisi di beberapa perjalanan pengguna untuk membuat web pengalaman lebih seperti aplikasi. Semua hal ini, ditambah dengan manfaat performa, menjadikannya harus memiliki fitur untuk semua situs web.—Amit Kumar, Senior Engineering Manajer, redBus.

Tim telah menerapkan transisi tampilan di beberapa tempat. Berikut ini contohnya kombinasi animasi fade in dan slide in pada ikon login di beranda kami.

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

Kode

Implementasi ini menggunakan beberapaview-transition-nameanimasi kustom (scale-down dan scale-up). Menggunakan view-transition-name dengan nilai unik memisahkan komponen {i>login<i} dari bagian laman lainnya untuk menganimasikannya secara terpisah. Membuat view-transition-name unik baru juga akan membuat elemen ::view-transition-groupdi hierarki elemen pseudo (ditunjukkan dalam kode), yang memungkinkannya untuk dimanipulasi secara terpisah dari ::view-transition-group(root).

::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.

Implementasinya sangat mudah, dengan menggunakan startViewTransition kami segera mendapatkan transisi memudar yang lebih menyenangkan dibandingkan dengan implementasi sebelumnya tanpa efek apa pun—Andy Wihalim, Software Senior Engineer, Tokopedia.

Sebelum

Setelah

Kode

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

Bazar Kebijakan

Policybazaar investasi Anda vertical telah menggunakan View Transition API pada elemen tips bantuan seperti "why buy", membuatnya menarik secara visual dan meningkatkan penggunaan fitur tersebut.

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

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

Kode

Kode berikut mirip dengan contoh sebelumnya. Satu hal yang perlu diperhatikan adalah kemampuan untuk mengganti gaya dan animasi {i>default<i} dari ::view-transition-old(root)dan::view-transition-new(root). Dalam kasus ini, animation-duration default diperbarui ke versi 0.4.

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 efek transisi beberapa tampilan pada halaman yang sama, pastikan Anda memiliki nama transisi-tampilan yang berbeda untuk setiap efek atau bagian guna mencegah konflik.

Saat transisi tampilan aktif (transisi), transisi akan menambahkan lapisan baru di bagian atas UI lainnya. Jadi, hindari memicu transisi ketika kursor diarahkan, karena peristiwa mouseLeave akan dipicu secara tidak terduga (saat kursor yang sebenarnya masih belum bergerak).

Resource

Transisi yang lancar dan sederhana dengan View Transition API
Penjelasan: Melihat Transisi untuk MPA
Studi Kasus: Navigasi yang lancar dapat dilakukan dengan View Transitions
Studi Kasus: Web Dapat Melakukan Apa!? | Menghadirkan navigasi layaknya aplikasi
Proposal Interoperabilitas: Jadikan Transisi Tampilan tersedia di seluruh browser
Ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda tentang SPA dan MPA.

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