Bu sayfa, Cloud Translation API ile çevrilmiştir.

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 yapılan animasyonlu ve sorunsuz geçişlerdir. View Transition API, bu efektleri daha önce mümkün olandan daha basit ve performanslı bir şekilde oluşturmanıza olanak tanımak için tasarlanmıştır. API, önceki JavaScript yaklaşımlarına kıyasla aşağıdakiler de dahil olmak üzere birçok avantaj sunar:

Daha iyi kullanıcı deneyimi: Sorunsuz geçişler ve görsel ipuçları, kullanıcıları kullanıcı arayüzündeki değişiklikler konusunda 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 hissini korumak 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 sorunsuz animasyonlar oluşturulur.
Modern estetik: İyileştirilmiş geçişler, kusursuz ve ilgi çekici bir kullanıcı deneyimi sunar.

Browser Support

Source

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 Transition API'yi nasıl uyguladığını ve bu API'den nasıl yararlandığını öğrenebilirsiniz.

redBus

redBus, her zaman kendi uygulaması ile web deneyimi arasında mümkün olduğunca fazla eşitlik oluşturmaya çalışmıştır. View Transition API'den önce bu animasyonları web öğelerimizde uygulamak zordu. Ancak API ile, web deneyimini uygulamaya daha çok benzetmek için birden fazla kullanıcı yolculuğunda geçişler oluşturmanın sezgisel olduğunu gördük. Tüm bunlar performans avantajlarıyla birleştiğinde bu özellik, tüm web siteleri için olmazsa olmaz 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 kullanılan, yavaş yavaş görünme ve kayarak görünme animasyonlarının birleşimine dair örneği aşağıda bulabilirsiniz.

Kullanıcı, redBus ana sayfasındaki giriş simgesini tıkladığında görünüm geçişlerini soldurarak ve kaydırarak gösterin.

Kod

Bu uygulamada birden fazla view-transition-name ve özel animasyonlar (scale-down ve scale-up) kullanılıyor. Benzersiz bir değere sahip view-transition-name kullanmak, oturum açma bileşenini sayfanın geri kalanından ayırarak ayrı ayrı animasyon oluşturulmasını sağlar. Yeni ve benzersiz bir view-transition-name oluşturmak, sözde öğe ağacında (aşağıdaki kodda gösterilmiştir) yeni bir ::view-transition-group oluşturur. Bu sayede, sözde öğ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 solma animasyonu eklemek için görünüm geçişlerini kullandı.

startViewTransition kullanılarak uygulama çok kolay. Önceki uygulamaya kıyasla, herhangi bir efekt olmadan 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 React çerçevesi kullanılmakta ve çerçeveye özgü kodlar (ör. flushSync.) yer almaktadır. 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 kontrol eden ve destekliyorsa geçiş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 dikeyinde, "neden satın almalısınız?" gibi yardım ipucu öğelerinde View Transition API kullanılarak bu öğeler görsel olarak çekici hale getirildi ve bu tür özelliklerin kullanımı iyileştirildi.

Görünüm Geçişleri'ni dahil ederek, çeşitli durumlardaki animasyonları yönetmekten sorumlu olan tekrarlayan CSS ve JavaScript kodunu ortadan kaldırdık. Bu sayede geliştirme çabası azalırken kullanıcı deneyimi önemli ölçüde iyileşti.—Aman Soni, Tech Lead, Policybazaar.

Yatırım listeleme sayfasındaki "Neden Policybazaar'dan satın almalısınız?" başlıklı TBM'de geçiş animasyonunu görüntüleyin.

Kod

Aşağıdaki kod, önceki örneklere benzerdir. ::view-transition-old(root) ve ::view-transition-new(root)'nin varsayılan stillerini ve animasyonlarını geçersiz kılma özelliğini unutmayın. Bu durumda, varsayılan animation-duration değeri 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ünüm geçişi efekti kullanırken çakışmaları önlemek için her efekt veya bölüm için farklı bir view-transition-name'e sahip olduğunuzdan emin olun.

Görünüm geçişi etkin durumdayken (geçiş yapılıyor) kullanıcı arayüzünün geri kalanının üzerine yeni bir katman eklenir. Bu nedenle, fareyle üzerine gelindiğinde geçişi tetiklemekten kaçının. Çünkü mouseLeave etkinliği beklenmedik bir şekilde tetiklenir (gerçek imleç henüz hareket etmediği halde).

Kaynaklar

View Transition API ile sorunsuz ve basit geçişler
Açıklayıcı: MPA için Görünüm Geçişleri
Örnek olay: Görünüm Geçişleri ile sorunsuz gezinme
Başarılı Örnek: Web Ne Yapabilir? | Uygulama benzeri gezinme deneyimleri sunma
Interop Proposal: Make View Transitions available across browsers
Hata bildirmek veya yeni özellik isteğinde bulunmak mı istiyorsunuz? SPA ve MPA ile ilgili görüşlerinizi almak istiyoruz.

Bu serideki diğer makaleleri inceleyerek e-ticaret şirketlerinin kaydırmaya dayalı animasyonlar, popover, kapsayıcı sorguları ve has() seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığını öğrenin.