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.
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.
Code
Implementasi ini menggunakan beberapa animasi view-transition-name
dan kustom
(scale-down
dan 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.
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()
.