Lihat studi kasus transisi

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

  • Pengalaman pengguna yang lebih baik: Transisi dan isyarat visual yang lancar memandu pengguna melalui perubahan di UI, membuat navigasi terasa alami dan tidak terlalu rumit.
  • Kognitif visual: Mempertahankan kesinambungan antartampilan akan mengurangi beban kognitif dan membantu pengguna tetap berorientasi dalam aplikasi.
  • Performa: API mencoba menggunakan resource thread utama minimal mungkin untuk menghasilkan animasi yang lebih halus.
  • Estetika modern: Transisi yang ditingkatkan berkontribusi pada pengalaman pengguna yang terbaik dan menarik.

Dukungan Browser

  • 111
  • 111
  • x
  • 18

Sumber

Postingan ini adalah bagian dari rangkaian yang membahas cara perusahaan e-commerce meningkatkan kualitas situsnya 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 kesetaraan sebanyak mungkin antara pengalaman native dan web mereka. Sebelum View Transition API, Anda kesulitan menerapkan animasi ini pada aset web kami. Namun dengan API, kami merasa proses membuat transisi di beberapa perjalanan pengguna terasa intuitif untuk membuat pengalaman web lebih mirip dengan aplikasi. Semua hal ini, yang ditambah dengan manfaat performa, menjadikannya fitur wajib dimiliki semua situs.—Amit Kumar, Senior Engineering Manager, redBus.

Tim telah menerapkan transisi tampilan di beberapa tempat. Berikut adalah contoh kombinasi animasi fade in dan slide in pada ikon login di halaman beranda.

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

Kode

Implementasi ini menggunakan beberapa animasi view-transition-namedan kustom (scale-downdan scale-up). Penggunaan 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 dalam hierarki elemen pseudo (ditampilkan dalam kode berikut), yang memungkinkannya untuk 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 antar-thumbnail produk.

Implementasinya sangat mudah. Dengan menggunakan startViewTransition, kami akan langsung mendapatkan transisi fading yang lebih menyenangkan dibandingkan dengan implementasi 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 menggunakan framework untuk mengimplementasikan transisi tampilan. Ini adalah implementasi dasar yang memeriksa apakah browser mendukung startViewTransition, dan jika ya, akan melakukan transisi. Jika tidak, metode 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})} />

Bazar Kebijakan

Vertical investment Policybazaar telah menggunakan View Transition API pada elemen tips 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 pada CTA "Mengapa 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 telah diupdate ke 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 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 (melakukan transisi), transisi ini akan menambahkan lapisan baru di bagian 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).

Referensi

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