Dokümanlar Arası Geçişler

Dokümanlar arası görünüm geçişleri, çok sayfalı bir uygulamanın (MPA) farklı sayfaları arasında sorunsuz, uygulama benzeri geçişler oluşturmanıza olanak tanır. Varsayılan olarak tarayıcı, çapraz geçiş yapar ancak bunu sitenizin estetiğine uyacak şekilde özelleştirebilirsiniz.

Uygulama Adımları

1. Belgeler arası görünüm geçişlerini etkinleştirme

Tarayıcının gezinme sırasında tetiklemesi için hem kaynak hem de hedef sayfaların görüntüleme geçişlerini etkinleştirmesi gerekir.

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. Geçiş animasyonlarını özelleştirme (isteğe bağlı)

Slayt veya gösterim gibi efektler oluşturmak için sözde öğeleri kullanarak geçişin eski ve yeni durumlarını hedefleyebilirsiniz.

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. Yönlü geçişler oluşturma (isteğe bağlı)

Gezindiğiniz sayfalara bağlı olarak farklı geçiş efektleri kullanmak isteyebilirsiniz. Örneğin, ana sayfadan iletişim sayfasına geçerken yeni içeriğin sağdan gelmesini isteyebilirsiniz. Ana sayfaya geri dönerken aynı efektin kullanılması mantıklı olmaz.

Gideceğiniz sayfa, sayfaya nasıl ulaştığınızdan bağımsız olarak her zaman aynı geçiş türüne sahip olacaksa bunu @view-transition kuralında types ile belirtebilirsiniz.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

Ayrıca, pagereveal için bir etkinlik işleyicide geçiş türlerini koşullu olarak belirtebilirsiniz.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

Ardından, her tür için farklı animasyonlar uygulamak üzere :active-view-transition-type() sözde seçicisini kullanın.

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

Yedek stratejiler

Bir tarayıcı, görüntüleme geçişlerini veya belgeler arası görüntüleme geçişlerini desteklemiyorsa standart bir anlık sayfada gezinme işlemi gerçekleştirir. Dokümanlar arası görüntüleme geçişleri, aşamalı bir geliştirmedir. Sitenin temel işlevi etkilenmez.

JavaScript'te destek olup olmadığını kontrol etmek için:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

Bir tarayıcı Navigation API'yi desteklemiyorsa geçiş türünü belirlemek için bu API'yi kullanamazsınız. Geçiş türünü belirlemek için alternatif bir yöntem kullanın veya yedek bir geçiş türü sağlayın. Aksi takdirde tarayıcı, standart bir anında sayfada gezinme işlemi gerçekleştirir.

JavaScript'te destek olup olmadığını kontrol etmek için:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}