Grup Öğesi Geçişleri

Listeye öğe eklendiğinde, listeden öğe kaldırıldığında veya öğeler yeniden düzenlendiğinde geçişler, kullanıcıların bağlamı korumasına yardımcı olabilir. Görünüm geçişleri, öğeye benzersiz bir view-transition-name vererek öğenin iki durumu arasında geçiş yapmanızı sağlar. Bir sayfadaki birden fazla öğe aynı geçiş davranışını paylaştığında view-transition-class, bu mantığı her benzersiz view-transition-name için tekrarlamak yerine CSS'de bir kez tanımlamanıza olanak tanır. Bu sayede stil sayfalarınızın bakımı kolaylaşır ve bir grup öğe arasında tutarlı animasyonlar elde edilir.

Uygulama adımları

1. Benzersiz adlar ve paylaşılan bir sınıf atama

   Geçiş sırasında ayrı ayrı izlenmesi gereken her öğenin benzersiz bir view-transition-name değeri olmalıdır.

   <!-- Mandatory: Each element must have a unique view-transition-name -->
   <li style="view-transition-name: item-1" class="item">Item 1</li>
   <li style="view-transition-name: item-2" class="item">Item 2</li>
   

   Paylaşılan stilleri uygulamak için bir view-transition-class da atayın.

   .item {
     view-transition-class: list-item;
   }
   

2. Paylaşılan geçiş mantığını tanımlama

   Bu gruptaki tüm üyelere stil uygulamak için sınıf seçiciyle birlikte ::view-transition-group() sözde öğesini kullanın.

   /* Targets any view transition group that has the 'list-item' class */
   ::view-transition-group(.list-item) {
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
   }
   
   /* Handle accessibility by respecting motion preferences */
   @media (prefers-reduced-motion: reduce) {
     /* Disable all group transitions, including the default `root` group. */
     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*) {
       animation: none !important;
     }
   }
   

3. İsteğe bağlı: Giriş ve çıkış animasyonlarını tanımlama

   Eklenen veya kaldırılan öğelere belirli geçişler eklemek için :only-child seçiciyi kullanın. ::view-transition-new() ve ::view-transition-old() sözde öğeleri, bir ::view-transition-image-pair() sözde öğesinin alt öğeleridir. Bu nedenle, tek alt öğe ise eklenen veya kaldırılan bir öğe olduğunu belirleyebiliriz.

   /* A `::view-transition-new()` element is the only child if it wasn't present before the view transition, so it is an added element. */
   ::view-transition-new(.list-item):only-child {
     animation-name: slide-in;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   /* A `::view-transition-old()` element is the only child if it isn't present after the view transition, so it is a removed element. */
   ::view-transition-old(.list-item):only-child {
     animation-name: slide-out;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   
   @keyframes slide-in {
     from {
       translate: -100vw 0;
     }
   }
   @keyframes slide-out {
     to {
       translate: -100vw 0;
     }
   }
   

4. Geçişi tetikleme

   DOM güncellemesini document.startViewTransition() içine alın. Tarayıcı eski durumu yakalar, güncellemeyi gerçekleştirir ve ardından yeni duruma animasyon uygular.

   function updateList(newData) {
     document.startViewTransition(() => {
       // All DOM changes inside this callback will be transitioned
       render(newData);
     });
   }
   

5. Geçiş yapılmayan öğelerin etkileşimini koruma

Görünüm geçişleri, DOM öğelerinin anlık görüntülerini üst üste yerleştirip ardından anlık görüntüleri geçirerek çalışır. Bu, geçiş sırasında öğelerin etkileşimli olmadığı anlamına gelir. Geçiş yapılmayan etkileşimli öğeler varsa görünüm geçişlerinde dokunma etkinliklerini devre dışı bırakarak bunları etkileşimli hale getirebilirsiniz.

::view-transition {
  /* Non-transitioned elements below the view transitions remain interactive */
  pointer-events: none;
}

Ayrıca, varsayılan olarak :root öğesinin root adlı bir görünüm geçişi vardır. Bu geçiş, varsayılan tam sayfa geçişlerini etkinleştirir. Kök öğede değişiklik yoksa bu, etkileşimli olmayan iki aynı anlık görüntü arasında geçiş olur. Ekranın tamamını değil, yalnızca belirli öğeleri geçişe tabi tuttuğumuz için root geçişini devre dışı bırakabiliriz.

:root {
  /* Disable the root transition because we are only transitioning specific elements. */
  view-transition-name: none;
}

Yedek stratejiler

Görünüm geçişleri, progresif bir geliştirmedir. Tarayıcı document.startViewTransition özelliğini desteklemiyorsa DOM güncellemesi yine de hemen gerçekleşmeli ve animasyonlu olmayan ancak işlevsel bir deneyim sunmalıdır.

if (document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
} else {
  // Fallback: Perform the update without animation
  updateDOM();
}

CSS için view-transition-class veya ::view-transition-group() sınıf seçiciyi tanımayan tarayıcılar bu kuralları yoksayar ve animasyon uygulanmaz.