Vue Academy · Ders

Transition Bileşeni

v-enter-from, v-enter-active, v-enter-to, v-leave-* sınıfları, özel sınıflar için name özelliği.

Transition Bileşeni, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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.

Transition Bileşeni Ne Yapar

Vue, yerleşik <Transition> bileşeniyle, v-if veya v-show aracılığıyla eklenip kaldırıldığında tek bir öğeye ya da bileşene giriş ve çıkış animasyonları uygular.

Kendisi ek bir DOM öğesi oluşturmaz; yalnızca alt öğesindeki CSS sınıflarını ve zamanlamayı yönetir.

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

Yalnızca Tek Öğe

<Transition>, tam olarak bir doğrudan alt öğe bekler. Birden çok kardeş öğeyi sarmalamak çalışmaz; listeler için bunun yerine <TransitionGroup> kullanın.

Alt öğenin görünürlüğü v-if, v-show veya dinamik bir bileşenle değiştirilmelidir.

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

Altı Geçiş Sınıfı

Bir giriş veya çıkış sırasında Vue, altı sınıfı sırayla otomatik olarak ekler ve kaldırır.

v-enter-from / v-leave-from - başlangıç durumu
v-enter-active / v-leave-active - etkin aşama (geçişi buraya yerleştirin)
v-enter-to / v-leave-to - bitiş durumu

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

Geçişinizi Adlandırma

Sınıf ön ekinin v- yerine adınıza dönüşmesi için geçişe bir name özelliği verin. name="fade" ile sınıflar fade-enter-from, fade-enter-active ve benzeri hâle gelir.

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

Tam Bir Solma Örneği

Klasik solma, opacity değerini canlandırır. Öğe tamamen saydam olarak başlar, etkin sınıf geçişi tanımlar ve hedef sınıfı öğeyi tam saydamlığa getirir.

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

Giriş Sırası Adım Adım

Öğe eklendiğinde:

fade-enter-from ve fade-enter-active, çizimden önce eklenir (saydamlık 0).
Bir sonraki karede fade-enter-from kaldırılır ve fade-enter-to eklenir; böylece saydamlık 1'e doğru canlanır.
Geçiş sona erdiğinde hem active hem de to sınıfları kaldırılır.

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

Çıkış Sırası

Çıkış, leave sınıflarıyla girişin tersini izler. Genellikle her iki yön için aynı etkin kuralı yeniden kullanırsınız.

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-if ve v-show Karşılaştırması

Her ikisi de geçişleri tetikler. v-if öğeyi gerçekten DOM'a ekler ve DOM'dan kaldırırken v-show öğeyi DOM'da tutar ve display değerini değiştirir. v-show için Vue, animasyonun yine görünür olması amacıyla etkin aşamanın çevresindeki görünürlük değişimini yönetir.

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

İlk Oluşturmada Görünme

Varsayılan olarak geçiş ilk oluşturmada çalışmaz. Bileşen ilk kez bağlandığında giriş animasyonunun oynatılması için appear özelliğini ekleyin.

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

İki Öğe Arasında Geçiş

İki öğeyi değiştirmek için tek bir Transition içinde v-if / v-else kullanın. Aynı etikete sahiplerse Vue'nun onları farklı öğeler olarak ele alması için her birine benzersiz bir key verin.

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

Azaltılmış Hareket ve Erişilebilirlik

Daha az hareket tercih eden kullanıcılara saygı gösterin. Animasyonların rahatsızlığa neden olmaması için prefers-reduced-motion ortam sorgusuyla geçişleri devre dışı bırakın veya kısaltın.

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

Hızlı Kontrol

fade-enter-from neyi tanımlar?

Özet

Yerleşik <Transition> bileşenini öğrendiniz: v-if/v-show ile görünürlüğü değiştirilen bir öğeyi sarar, altı CSS sınıfı (enter-from, enter-active, enter-to ve bunların leave karşılıkları) uygular, bir name ön ekini destekler, ilk oluşturma için appear ve öğe değişimleri için mode kullanır.

Sıkça Sorulan Sorular

“Transition Bileşeni” dersi ücretsiz mi?

Evet — “Transition Bileşeni” 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.

“Transition Bileşeni” dersinde ne öğreneceğim?

v-enter-from, v-enter-active, v-enter-to, v-leave-* sınıfları, özel sınıflar için name özelliği. 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 1. dersidir.

“Transition Bileşeni” 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

← Vue Academy Sayfasına Dön