Görünüm geçişleri, bir web sayfasının veya uygulamanın kullanıcı arayüzünün farklı durumları arasında animasyonlu ve kesintisiz geçişlerdir. View Transition API, bu efektleri her zamankinden daha basit ve performanslı bir şekilde oluşturmanıza olanak tanıyacak şekilde tasarlanmıştır. API, önceki JavaScript yaklaşımlarına göre aşağıdakiler gibi birçok avantaj sunar:
- İyileştirilmiş kullanıcı deneyimi: Yumuşak geçişler ve görsel işaretler, kullanıcı arayüzündeki değişikliklerle kullanıcılara rehberlik ederek gezinmenin doğal olmasını ve daha az rahatsız edici olmasını sağlar.
- Görsel süreklilik: Görünümler arasında bir süreklilik duygusunu korumak, bilişsel yükü azaltır ve kullanıcıların uygulama içinde odaklanmalarına yardımcı olur.
- Performans: API, daha akıcı animasyonlar oluşturmak için mümkün olduğunca az sayıda ana iş parçacığı kaynağı kullanmaya çalışır.
- Modern estetik: İyileştirilmiş geçişler, şık ve ilgi çekici bir kullanıcı deneyimine katkı sağlıyor.
Bu yayın, e-ticaret şirketlerinin yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiğini anlatan bir serinin parçasıdır. Bu makalede, bazı şirketlerin View Transition API'yi nasıl uyguladığını ve ondan nasıl yararlandığını keşfedin.
redBus
redBus, yerel ve web deneyimleri arasında her zaman mümkün olduğunca denklik oluşturmaya çalıştı. View Transition API'den önce bu animasyonları web öğelerimize uygulamak zordu. Ancak API sayesinde, web deneyimini uygulama benzeri hale getirmek için birden fazla kullanıcı yolculuğunda geçişler oluşturmanın pratik olduğunu gördük. Tüm bu avantajlar, performans avantajlarıyla birlikte mağazayı tüm web sitelerinde bulunması gereken bir özellik haline getiriyor. - AmitKumar, Kıdemli Mühendislik Yöneticisi, redBus.
Ekip, görüntüleme geçişlerini birden fazla yerde uyguladı. Burada, ana sayfadaki giriş simgesinde kararma ve kayma animasyonunun bir kombinasyonu bulunmaktadır.
Kod
Bu uygulamada birden çokview-transition-nameve özel animasyon
(scale-downve scale-up) kullanılır. Benzersiz bir değerle view-transition-name kullanıldığında, oturum açma bileşeni sayfanın geri kalanından ayrılarak ayrı olarak animasyon yapılır. Yeni bir benzersiz view-transition-name oluşturulduğunda, sözde öğe ağacında yeni bir ::view-transition-groupoluşturulur (aşağıdaki kodda gösterilmiştir) ve bu değer, varsayılan öğeden (::view-transition-group(root)) 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şleri kullandı.
Uygulama çok kolay.
startViewTransitionkullanıldığında, herhangi bir etkisi olmayan önceki uygulamaya kıyasla hemen daha keyifli bir solma geçişi elde ediyoruz; Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia.
Önce
Sonra
Kod
Aşağıdaki kod, React çerçevesi kullanır ve çerçeveye özgü 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 hizmetini destekleyip desteklemediğini ve destekliyorsa geçişi kontrol eden temel bir uygulamadır. Aksi takdirde, varsayılan davranışa geri 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ıyım?" gibi yardım ipucu öğeleri için View Transition API'yi kullandı. Bu sayede bu öğeler hem görsel açıdan ilgi çekici hem de bu özelliklerin kullanımını iyileştirdi.
Görünüm Geçişlerini dahil ederek çeşitli durumlarda animasyonları yönetmekten sorumlu tekrarlayan CSS ve JavaScript kodlarını ortadan kaldırdık. Bu, geliştirme çabalarından tasarruf sağladı ve kullanıcı deneyimini önemli ölçüde iyileştirdi. - Aman Soni, Teknoloji Lideri, Policybazaar.
Kod
Aşağıdaki kod önceki örneklere benzer. Unutulmaması gereken önemli bir nokta, ::view-transition-old(root) ve ::view-transition-new(root) öğelerinin varsayılan stillerini ve animasyonlarını geçersiz kılma olanağıdır. Bu durumda, varsayılan animation-duration 0,4 sn.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 Transition 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 amacıyla her efekt veya bölüm için farklı bir görünüm geçişi adına sahip olduğunuzdan 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 üzerine yeni bir katman eklenir. Dolayısıyla, mouseLeave etkinliği beklenmedik bir şekilde (gerçek imleç hâlâ hareket etmediğinde) tetikleneceği için fareyle üzerine gelindiğinde geçişi tetiklemekten kaçının.
Kaynaklar
- View Transition API ile sorunsuz ve basit geçişler
- Açıklayıcı: MPA için geçişleri görüntüleme
- Örnek olay: Görüntüleme geçişleri sayesinde sorunsuz gezinme
- Örnek Olay: Web Ne Yapabilir? | Uygulama benzeri gezinme olanakları sunun
- Birlikte Çalışma Teklifi: Görüntüleme geçişlerini tarayıcılar arasında kullanılabilir hale getirme
- Hata bildirmek mi yoksa yeni bir özellik talep etmek mi istiyorsunuz? SPA ve MPA için görüşlerinizi duymak istiyoruz.
E-ticaret şirketlerinin kaydırma odaklı animasyonlar, popover, 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.