Transisi tampilan adalah transisi animasi dan lancar antara berbagai status halaman web atau UI aplikasi. View Transition API telah dirancang untuk memungkinkan Anda membuat efek ini dengan cara yang lebih sederhana dan berperforma lebih baik 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 sebanyak mungkin yang menghasilkan animasi yang lebih lancar.
- Estetika modern: Transisi yang ditingkatkan akan berkontribusi pada pengalaman pengguna yang menarik dan rapi.
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 intuitif untuk membuat transisi di beberapa perjalanan pengguna agar pengalaman web lebih mirip aplikasi. Semua ini 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 utama.
Kode
Implementasi ini menggunakan beberapa animasi view-transition-name
dan kustom
(scale-down
dan 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 baru juga akan membuat
::view-transition-group
baru dalam hierarki elemen pseudo (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 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 bekerja dengan framework untuk menerapkan transisi
tampilan.
Ini adalah implementasi dasar yang memeriksa apakah browser mendukung
startViewTransition
dan jika ya, apakah transisi dilakukan. Jika tidak, perilaku 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})} />
Policybazaar
Vertical investasi Policybazaar telah menggunakan View Transition API pada elemen tips bantuan seperti "alasan membeli", sehingga membuatnya menarik secara visual dan meningkatkan penggunaan fitur tersebut.
Dengan menggabungkan Transisi Tampilan, 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. 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 (bertransisi), transisi tersebut 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 Transition API
- Penjelasan: Melihat Transisi untuk MPA
- Studi Kasus: Navigasi yang lancar dapat dilakukan dengan Transisi Tampilan
- Studi Kasus: The Web Can Do What!? | Menghadirkan navigasi layaknya aplikasi
- Proposal Interop: Menjadikan Transisi Tampilan tersedia di seluruh browser
- Ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda untuk SPA dan MPA.
Pelajari artikel lain dalam seri ini yang membahas manfaat yang diperoleh perusahaan
e-commerce dari penggunaan fitur CSS dan UI baru seperti animasi
yang didorong Scroll, popover, kueri penampung, dan pemilih has()
.