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

Swetha Gopalakrishnan

Saurabh Rajpal

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 sorunsuz 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 çok sayıda avantaj sunar. Bunlardan bazıları:

• Daha iyi kullanıcı deneyimi: Sorunsuz geçişler ve görsel ipuçları, kullanıcıları kullanıcı arayüzündeki değişikliklerde yönlendirerek gezinmeyi doğal ve daha az rahatsız edici hale getirir.
• Görsel süreklilik: Görünümler arasında süreklilik hissi sağlamak, bilişsel yükü azaltır ve kullanıcıların uygulamada yönlerini kaybetmemesine yardımcı olur.
• Performans: API, mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışır. Bu sayede daha akıcı animasyonlar oluşturulur.
• Modern estetik: İyileştirilmiş geçişler, şık ve ilgi çekici bir kullanıcı deneyimi sağlar.

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 Görüntüleme Geçişi API'yi nasıl uyguladığı ve bu API'den nasıl yararlandığı açıklanmaktadır.

redBus

redBus, yerel ve web deneyimleri arasında her zaman mümkün olduğunca eşitlik sağlamaya çalıştı. Görüntü Geçişi API'sinden önce bu animasyonları web öğelerimize uygulamak zordu. Ancak API sayesinde, web deneyimini daha uygulama benzeri hale getirmek için birden fazla kullanıcı yolculuğunda geçişler oluşturmanın sezgisel olduğunu fark ettik. Tüm bunlar, performans avantajlarıyla birlikte bu özelliği tüm web siteleri için zorunlu kılıyor.—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 kaydırma ve kaybolma animasyonlarının birlikte kullanıldığı bir örneği aşağıda bulabilirsiniz.

Kod

Bu uygulamada birden fazlaview-transition-name ve özel animasyon (scale-down ve scale-up) kullanılmaktadır. view-transition-name öğesi benzersiz bir değerle kullanıldığında, oturum açma bileşeni ayrı animasyonlar için sayfanın geri kalanından ayrılır. Yeni bir benzersiz view-transition-name oluşturduğunuzda, sözde öğe ağacında (aşağıdaki kodda gösterilmiştir) yeni bir ::view-transition-group de oluşturulur. Bu sayede, 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 kaybolan bir animasyon eklemek için görünüm geçişlerini kullandı.

Uygulama çok kolay. startViewTransition'ü kullanarak, herhangi bir efekt olmadan önceki uygulamaya kıyasla daha hoş bir solma geçişi elde ediyoruz. Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia.

Önce

Sonra

Kod

Aşağıdaki kodda bir React çerçevesi kullanılmaktadır ve çerçeveye özgü kodlar (ör. flushSync.Görüntü geçişlerini uygulamak için çerçevelerle çalışma hakkında daha fazla bilgi edinin.) yer almaktadır. Bu, tarayıcının startViewTransition'ü destekleyip desteklemediğini kontrol eden ve desteklediği takdirde geçiş yapan 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})} />

Policybazaar

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şleri'ni dahil ederek, çeşitli durumlarda animasyonları yönetmekten sorumlu olan tekrar eden CSS ve JavaScript kodlarını ortadan kaldırdık. Bu sayede geliştirme çalışmalarından tasarruf ettik ve kullanıcı deneyimini önemli ölçüde iyileştidik.—Aman Soni, Teknik Lider, Policybazaar.

Kod

Aşağıdaki kod, önceki örneklere benzer. Önemli noktalardan biri, ::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 saniye olarak güncellendi.

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 fazla görüntü geçişi efekti kullanırken çakışmaları önlemek için her efekt veya bölüm için farklı bir view-transition-name değerine sahip olduğunuzdan emin olun.

Görünüm geçişi etkinken (geçiş sırasında) kullanıcı arayüzünün geri kalanının üzerine yeni bir katman eklenir. Bu nedenle, mouseLeave etkinliği beklenmedik bir şekilde tetikleneceğinden (gerçek imleç henüz hareket etmediği halde) geçişi fareyle üzerine gelmeyle tetiklemekten kaçının.

Kaynaklar

• Görüntüleme Geçişi API'si 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
• Başarılı Örnek: Web'in Yapabilecekleri | Uygulama benzeri gezinmeler yayınlama
• İnteroperabilite Önerisi: Görüntüleme Geçişleri'ni tarayıcılarda kullanılabilir hale getirme
• Hata bildirmek veya yeni bir özellik isteğinde bulunmak ister misiniz? SPA ve MPA için görüşlerinizi duymak istiyoruz.

E-ticaret şirketlerinin kaydırma tabanlı 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.

• Web kullanıcı arayüzü özellikleri e-ticaret siteniz için neden önemlidir?
• Kaydırmayla çalışan animasyonlarla ilgili örnek olaylar
• Pop-up API örnek olaylarını
• Kapsayıcı Sorguları örnek olayları
• :has() seçici örnek olayları