Vue Academy · Ders

Route Geçişleri ve Animasyon

Transition ile RouterView, route'a göre transition-name ve route'lar arasında kaydırma/solma.

Route Geçişleri ve Animasyon, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. 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.

Rotalar Arasında Canlandırma

URL değiştiğinde eşleşen bileşen anında değiştirilir. Görünümü Vue'nun geçiş bileşeniyle sararak sayfalar arasında daha akıcı bir his veren solma veya kayma efektleri uygulayabilirsiniz.

v-slot ile RouterView

Canlandırma yapmak için çözümlenen bileşime erişmeniz gerekir. RouterView bileşeninin kapsamı belirlenmiş yuva biçimi, Component ve route değerlerini dışa açar.

<RouterView v-slot="{ Component }">
  <component :is="Component" />
</RouterView>

Transition ile Sarmalama

Dinamik component bileşeninin etrafına bir Transition yerleştirin. Rota bileşeni bağlanıp ayrılırken Vue, giriş ve çıkış sınıflarını uygular.

<RouterView v-slot="{ Component }">
  <Transition name="fade" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

out-in Modu Neden Kullanılır?

mode olmadan eski ve yeni sayfalar aynı anda canlanır ve üst üste biner. mode="out-in", yeni sayfa girmeden önce eski sayfanın çıkmasını bekler.

CSS'yi Tanımlama

name bir CSS sınıfı ön eki olur. Solma efekti için giriş ve çıkış geçişlerini tanımlayın.

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Üstveriyle Rota Başına Geçiş

Farklı rotaların farklı şekillerde canlanması için rota meta alanında bir geçiş adı saklayın; bir bölüm için kayma, başka bir bölüm için solma kullanabilirsiniz.

{ path: '/about', component: About, meta: { transition: 'slide' } }

Geçiş Adını Hesaplama

Yuvadaki route.meta.transition değerini okuyup Transition adına bağlayın ve varsayılan bir değere geri dönün.

<RouterView v-slot="{ Component, route }">
  <Transition :name="route.meta.transition || 'fade'" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

Yönlü Kaymalar

Gezinme yönüne göre geçişi dinamik olarak seçebilirsiniz; örneğin bir sayfa ileri giderken sola, geri giderken sağa kayabilir. Bunun için bir koruyucuda rota derinliklerini karşılaştırın.

Giriş ve Çıkış Kayması

Bir kayma, opaklık ile dönüşümü birleştirir. Giriş yapan sayfayı sağdan içeri, ayrılan sayfayı sola doğru dışarı taşıyın.

<style>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>

Parametre Değişiklikleri için Anahtar Kullanma

İki rota aynı bileşeni paylaşıyorsa (örneğin /user/1 ve /user/2), Vue bileşeni yeniden kullanır ve geçişi atlar. Yeniden oluşturmayı ve canlandırmayı zorlamak için rota yoluna bir :key ekleyin.

<component :is="Component" :key="route.path" />

Azaltılmış Hareket Tercihine Uyma

Erişilebilirlik için kullanıcı azaltılmış hareketi tercih ettiğinde CSS medya sorgusunu kullanarak canlandırmaları devre dışı bırakın.

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

Hızlı Kontrol

Rota geçişleri konusundaki bilginizi sınayın.

Özet

Rotaları canlandırmayı öğrendiniz:

Component ve route değerlerini almak için RouterView ile v-slot kullanın.
component :is değerini Transition ile sarın ve mode="out-in" kullanın.
Geçiş adına göre giriş ve çıkış CSS sınıflarını tanımlayın.
Rota başına canlandırmalar için route.meta.transition değerini okuyun; paylaşılan bileşenlere :key ekleyin.

Sıkça Sorulan Sorular

“Route Geçişleri ve Animasyon” dersi ücretsiz mi?

Evet — “Route Geçişleri ve Animasyon” 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.

“Route Geçişleri ve Animasyon” dersinde ne öğreneceğim?

Transition ile RouterView, route'a göre transition-name ve route'lar arasında kaydırma/solma. 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 2. dersidir.

“Route Geçişleri ve Animasyon” 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

← Vue Academy Sayfasına Dön