Liste Animasyonları için TransitionGroup
v-for listelerini canlandırma, hareket geçişleri, gecikmeyle kademeli animasyonlar.
Liste Animasyonları için TransitionGroup, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Listeleri Canlandırma
<Transition> tek bir öğeyi yönetir. v-for ile oluşturulan listeler için öğeler eklendiğinde, kaldırıldığında ve yeniden sıralandığında onları canlandıran <TransitionGroup> kullanın.
tag Özelliği
Transition'ın aksine TransitionGroup gerçek bir kapsayıcı öğe oluşturabilir. tag="ul" (veya herhangi bir etiket) aktarın; liste öğelerinin çevresinde bu öğeyi oluşturur.
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</TransitionGroup>Her Öğenin Bir key Değeri Olmalı
Her öğede benzersiz bir :key bulunması zorunludur. Vue hangi öğelerin hareket ettiğini, giriş yaptığını veya ayrıldığını izlemek için bunu kullanır. Canlandırılan listelerde dizi dizinini hiçbir zaman key olarak kullanmayın.
<li v-for="item in items" :key="item.id">{{ item.text }}</li>Giriş ve Ayrılma Sınıfları
TransitionGroup, Transition ile aynı giriş ve ayrılma sınıflarını kullanır. Öğelerin görünmesi ve kaldırılması için bu sınıfları tanımlayın.
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}Özel move Sınıfı
Öne çıkan özellik -move sınıfıdır (örneğin list-move). Öğeler yeniden sıralandığında Vue, bir dönüşüm geçişi kullanarak her birini yeni konumuna yumuşak biçimde taşır.
.list-move {
transition: transform 0.4s ease;
}FLIP Tekniği
-move sınıfının arkasında FLIP bulunur: First ile eski konumu kaydedin, Last ile yeni konumu okuyun, öğe hareket etmemiş gibi görünsün diye bir dönüşümle Invert uygulayın, ardından dönüşümü kaldırarak Play aşamasını gerçekleştirin. Vue bunların hepsini otomatik yapar.
/* Vue computes: translate(oldX - newX) then animates to 0 */Ayrılan Öğeler Mutlak Konumlandırılmalı
Kaldırılmakta olan bir öğe hâlâ yer kaplar; bu da komşularının hareket animasyonunu bozabilir. Ayrılan öğelerin yerleşim akışından çıkarılması için position: absolute ayarını leave-active sınıfında kullanın.
.list-leave-active {
position: absolute;
}Sıralanabilir Liste Örneği
Giriş, ayrılma ve hareket sınıflarını birleştirdiğinizde Vue ekleme, kaldırma ve karıştırma işlemlerini aynı anda canlandırır.
function shuffle() {
items.value = items.value
.slice()
.sort(() => Math.random() - 0.5);
}transitionDelay ile Gecikmeli Sıralama
Öğelerin birbiri ardına görünmesini sağlamak için öğe dizinine dayalı bir satır içi transition-delay bağlayın. Her öğe bir öncekinden biraz daha uzun süre bekler.
<li
v-for="(item, i) in items"
:key="item.id"
:style="{ transitionDelay: i * 50 + 'ms' }"
>
{{ item.text }}
</li>JS Kancalarıyla Gecikmeli Sıralama
Veriye dayalı gecikmeli sıralama için JS kancalarını ve bir data-index özniteliğini de kullanabilirsiniz; böylece her onEnter çağrısını öğenin dizinine göre geciktirebilirsiniz.
function onEnter(el, done) {
const delay = el.dataset.index * 50;
setTimeout(() => {
el.style.opacity = 1;
done();
}, delay);
}Performans Notları
FLIP, GPU dostu olan transform özelliğini canlandırır. Listeleri makul boyutlarda tutun; akıcı 60 fps hareket için genişlik veya üst konum gibi yerleşimi tetikleyen özellikler yerine transform ve saydamlığı tercih edin.
Kısa Kontrol
list-move sınıfı neyi mümkün kılar?
Özet
Listeler için <TransitionGroup> kullanmayı öğrendiniz: tag ile bir kapsayıcı oluşturun, her öğeye benzersiz bir :key verin, FLIP tabanlı yeniden sıralama animasyonları için giriş ve ayrılma sınıflarının yanı sıra -move sınıfını kullanın, ayrılan öğeleri mutlak konumlandırın ve dizin tabanlı transitionDelay ile gecikmeli sıralama efektleri oluşturun.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“Liste Animasyonları için TransitionGroup” dersi ücretsiz mi?
Evet — “Liste Animasyonları için TransitionGroup” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Liste Animasyonları için TransitionGroup” dersinde ne öğreneceğim?
v-for listelerini canlandırma, hareket geçişleri, gecikmeyle kademeli animasyonlar. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Liste Animasyonları için TransitionGroup” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Transition Bileşeni
- CSS Geçişleri ve Animasyonları
- JavaScript Geçiş Kancaları
- Liste Animasyonları için TransitionGroup