Görünüm geçişleri, bir web sayfasının veya uygulamanın kullanıcı arayüzünün farklı durumları arasındaki animasyonlu ve kesintisiz geçişlerdir. View Transitions API, bu efektleri eskisinden daha basit ve etkili bir şekilde oluşturmanıza olanak tanıyacak şekilde tasarlanmıştır. API, önceki JavaScript yaklaşımlarına kıyasla aşağıdaki gibi birçok avantaj sunar:
- Daha iyi kullanıcı deneyimi: Sorunsuz geçişler ve görsel işaretler, kullanıcı arayüzündeki değişikliklerde kullanıcılara yol göstererek gezinmeyi doğal ve daha az rahatsız edici hale getirir.
- Görsel süreklilik: Görünümler arasında devamlılık hissini korumak bilişsel yükü azaltır ve kullanıcıların uygulama içinde yönlerini korumalarına yardımcı olur.
- Performans: API, daha düzgün animasyonlar oluşturmak için mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışır.
- Modern estetik: İyileştirilen geçişler, şık ve ilgi çekici bir kullanıcı deneyimine katkıda bulunur.
Bu gönderi, e-ticaret şirketlerinin yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiğini ele alan bir serinin parçasıdır. Bu makalede, bazı şirketlerin View Transitions API'yi nasıl uyguladığı ve bundan nasıl yararlandığı açıklanmaktadır.
redBus
redBus, her zaman yerel ve web deneyimleri arasında mümkün olduğunca yüksek oranda denklik oluşturmaya çalışmıştır. View Transitions API'den önce bu animasyonları web öğelerimize uygulamak zordu. Ancak API sayesinde, web deneyimini uygulamalara daha benzer hale getirmek için birden fazla kullanıcı yolculuğunda geçişler oluşturmayı sezgisel bulduk. Tüm bunlar, performans avantajlarıyla birleştiğinde tüm web siteleri için vazgeçilmez bir özellik haline geliyor. Amit Kumar, Kıdemli Mühendislik Yöneticisi, redBus.
Ekip, görünüm geçişlerini birden fazla yerde uyguladı. Ana sayfadaki giriş simgesinde belirme ve kaydırma animasyonlarının bir kombinasyonunu burada bulabilirsiniz.
Kod
Bu uygulama hem birden çokview-transition-name
hem de özel animasyon (scale-down
ve scale-up
) kullanır. Benzersiz bir değerle view-transition-name
kullanılması, oturum açma bileşenini sayfanın geri kalanından ayrı olarak canlandırmak için ayırır. Yeni bir benzersiz view-transition-name
oluşturulduğunda, sözde öğe ağacında da (aşağıdaki kodda gösterilmiştir) yeni bir ::view-transition-group
oluşturulur ve bu öğe, varsayılan ::view-transition-group(root)
öğesinden ayrı olarak değiştirilebilir.
::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
Ekip, kullanıcı ürün küçük resimleri arasında geçiş yaptığında kararma animasyonu eklemek için görüntüleme geçişlerinden yararlandı.
Uygulanması son derece kolay.
startViewTransition
sayesinde, bir önceki uygulamaya kıyasla daha hoş bir geçiş geçişini anında elde ediyoruz. Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia.
Önce
Sonra
Kod
Aşağıdaki kod bir React çerçevesi kullanır ve çerçeveye özel kod içerir. Örneğin, flushSync.
Görünüm geçişlerini uygulamak için çerçevelerle çalışma hakkında daha fazla bilgi edinin.
Bu, tarayıcının startViewTransition
özelliğini destekleyip desteklemediğini ve destekliyorsa da geçişin tamamlanıp tamamlanmadığını kontrol eden temel bir uygulamadır. Aksi halde varsayılan davranışa döner.
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})} />
Politika pazarı
Policybazaar'ın yatırım sektörü, "neden satın almalı" gibi yardım ipucu öğeleri için View Transitions API'yi kullandı. Böylece, bu öğeler görsel açıdan çekici hale geldi ve bu tür özelliklerin kullanımı arttı.
Görünüm Geçişlerini ekleyerek, çeşitli durumlarda animasyonların yönetiminden sorumlu olan tekrar eden CSS ve JavaScript kodlarını ortadan kaldırdık. Bu sayede hem daha az geliştirme çabası sağlandı hem de kullanıcı deneyimi önemli ölçüde gelişti. Aman Soni, Teknoloji Lideri, Policybazaar.
Kod
Aşağıdaki kod, önceki örneklere benzer. Unutulmaması gereken bir nokta da ::view-transition-old(root)
ve ::view-transition-new(root)
öğelerinin varsayılan stil ve animasyonlarını geçersiz kılma yeteneğidir. Bu durumda, varsayılan animation-duration
değeri 0,4 saniye olarak güncellenmiştir.
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;
}
View Transitions API'yi kullanırken dikkat edilmesi gereken noktalar
Aynı sayfada birden çok görünüm geçişi efekti kullanırken, çakışmaları önlemek için her efekt veya bölüm için farklı bir görüntüleme geçişi adının bulunduğundan emin olun.
Bir görünüm geçişi etkin durumdayken (geçiş sürecinde), kullanıcı arayüzünün geri kalanının üstüne yeni bir katman ekler. Bu nedenle, fareyle üzerine gelindiğinde geçişi tetiklemekten kaçının. mouseLeave
etkinliği beklenmedik bir şekilde (gerçek imleç henüz hareket etmediğinde) tetiklenecektir.
Kaynaklar
- View Transitions API ile sorunsuz ve basit geçişler
- Açıklayıcı: MPA İçin Geçişleri Görüntüleme
- Örnek olay: View Transitions sayesinde sorunsuz gezinme imkanı sağlandı
- Örnek Olay: Web Can Do What!? | Uygulama benzeri gezinme olanakları sunun
- Birlikte Çalışma Teklifi: Görünüm Geçişlerinin tarayıcılar arasında kullanılabilir olmasını sağlama
- Hata bildirmek mi yoksa yeni bir özellik isteğinde bulunmak mı istiyorsunuz? SPA ve MPA ile ilgili düşüncelerinizi öğrenmek istiyoruz.
E-ticaret şirketlerinin kaydırma destekli animasyonlar, pop-up, kapsayıcı sorguları ve has()
seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığını anlatan bu serideki diğer makaleleri inceleyin.