Yönlü Gezinme Geçişleri

Tek sayfalık uygulamalar (SPA'lar), yeni bir sayfaya gitmeden sayfanın içeriğini değiştirerek gezinme görünümü sağlar. Varsayılan olarak içerik, herhangi bir geçiş olmadan değiştirilir. Yönlü geçişler, görünümler arasındaki uzamsal ilişkiyi görsel olarak güçlendirebilir.

Yeni içeriği kullanıcının hareket ettiği yönden kaydırarak uygulama yapısının zihinsel bir haritasını oluşturursunuz. Örneğin, bir ürün sitesinde "ileri" için sağa, "geri" için sola geçiş gösterilebilir veya bir slayt gösterisinde sonraki ve önceki slaytları göstermek için yukarı ve aşağı geçiş yapılabilir.

Uygulama Adımları

1. Gezinme yönünü algılama: Kullanıcının uygulama akışında "ileri" mi yoksa "geri" mi gittiğini belirleyin. Yönü nasıl algılayacağınız kullanım alanınıza bağlıdır.
2. Türlerle Geçişi Tetikleme: Geçişi kategorize etmek için yönü bir types dizisinde document.startViewTransition()'e iletin.
3. CSS ile yönlü animasyonlar tanımlama: Gezinme türüne göre belirli animasyonlar uygulamak için :active-view-transition-type() sözde sınıfını kullanın.

Animasyon karelerini tanımlama

Her yöne doğru kayma animasyonları tanımlayın. En iyi performans için transform özelliğini veya bağımsız dönüşüm özellikleri olan scale, rotate ve translate özelliklerini kullanarak konum değişikliklerine animasyon ekleyin. opacity de genellikle performanslıdır ancak diğer CSS özelliklerini, düzen veya boyamayı tetiklemediklerini doğrulamadan animasyonlu hale getirmekten kaçının.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

Paylaşılan animasyon ayarlarını yapma

Tüm geçişlerde paylaşılan animasyon ayarlarını uygulamak için ::view-transition-group(root) seçiciyi kullanın.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

Yönlü Animasyonları Uygulama

"İleri" veya "geri" türü etkin olduğunda geçiş görünümlerini özel olarak hedeflemek için active-view-transition-type sözde sınıfını kullanın.

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

Geçişi Tetikleme

Gezinirken startViewTransition yöntemine uygun türü iletin.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

Erişilebilirlik

Animasyonları devre dışı bırakarak veya basitleştirerek azaltılmış hareketle ilgili kullanıcı tercihlerine her zaman saygı gösterin.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

Yedek stratejiler

View Transitions API, progresif bir geliştirmedir. Desteklenmeyen tarayıcılarda document.startViewTransition, undefined olur. DOM güncellemesinin animasyon olmadan hemen gerçekleşmesini sağlamak için gezinme mantığınızı bir özellik algılama kontrolüne sarmalamanız gerekir. Bu yardımcı işlevde gösterildiği gibi:

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}