Geçişlerle ilgili örnek olayları görüntüleyin

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Tarayıcı Desteği

  • 111
  • 111
  • x
  • x

Kaynak

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.

Kullanıcı redBus ana sayfasındaki giriş simgesini tıkladığında görünüm geçişlerinde şeffaf ve kaydırılabilir.

Kod

Bu uygulama hem birden çokview-transition-name hem de özel animasyon (scale-downve 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.

Bir yatırım listeleme sayfasındaki "Neden Policybazaar'dan alışveriş yapıyoruz?" CTA'sında yer alan geçiş animasyonunu görüntüleyin.

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

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.