Geçiş Grupları

`` , listede oluşturulan öğelerin veya bileşenlerin eklenmesi, kaldırılması ve sırasının değiştirilmesi için animasyon yapmak üzere tasarlanmış yerleşik bir bileşendir.

`` ile Farklılıklar

aşağıdaki farklılıklarla birlikte ile aynı özellikleri, CSS geçiş sınıflarını ve JavaScript kanca dinleyicilerini destekler:

Varsayılan olarak, bir sarmalayıcı öğe render etmez. Ancak tag özelliği ile render edilmesi gereken bir öğeyi belirtebilirsiniz.
Geçiş modları mevcut değildir, çünkü karşılıklı olarak dışlayıcı öğeler arasında geçiş yapmıyoruz.
İçerideki öğelerin her zaman benzersiz bir key niteliğine sahip olması gerekir.
CSS geçiş sınıfları, liste içindeki bireysel öğelere uygulanacak, grup / konteyner üzerine değil.

ipucu

in-DOM şablonlarında kullanıldığında, `` olarak referans verilmelidir.

Girme / Çıkma Geçişleri

Aşağıda `kullanarak birv-for` listesine girme / çıkma geçişlerini uygulama örneği verilmiştir:

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

Taşıma Geçişleri

Yukarıdaki demo bazı belirgin hatalara sahiptir: bir öğe eklendiğinde veya kaldırıldığında, çevresindeki öğeler anında "zıplar" yerine düzgün bir şekilde hareket etmez. Bunu, birkaç ek CSS kuralı ekleyerek düzeltebiliriz:

.list-move, /* hareket eden öğelere geçiş uygula */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* çıkmakta olan öğelerin düzen akışından çıkarılması sağlanır,
   böylece hareket animasyonları doğru şekilde hesaplanabilir. */
.list-leave-active {
  position: absolute;
}

Artık çok daha iyi görünüyor - hatta tüm liste karıştırıldığında düzgün bir şekilde animasyon yapılabiliyor:

Tam Örnek

Özel Geçiş Grubu Sınıfları

Hareket eden öğe için moveClass özelliğini geçirerek üzerine özel geçiş sınıfları da belirtebilirsiniz, tıpkı ` üzerindeki özel geçiş sınıflarında olduğu gibi`.

Liste Geçişlerinin Gecikmesi

JavaScript geçişleri ile veri öznitelikleri aracılığıyla iletişim kurarak, bir listede geçişlerin gecikmesini sağlamak da mümkündür. İlk olarak, bir öğenin indeksini DOM öğesi üzerine bir veri özniteliği olarak render ediyoruz:

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

Daha sonra, JavaScript kancalarında, veri özniteliğine dayanan bir gecikme ile öğeyi animasyonluyoruz. Bu örnekte GSAP kütüphanesi animasyonu gerçekleştirmek için kullanılıyor:

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

Tam Örnek Oyun Alanında