JavaScript Geçiş Kancaları
@before-enter, @enter, @after-enter, @leave kancaları, karmaşık animasyonlar için GSAP kullanımı.
JavaScript Geçiş Kancaları, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. 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.
JavaScript Kancaları Neden Kullanılır
CSS sınıfları çoğu durumu kapsar; ancak bazı animasyonlar JavaScript gerektirir: GSAP gibi kütüphaneleri entegre etmek, canvas'ı canlandırmak veya dinamik değerleri hesaplamak gibi. <Transition> bunun için yaşam döngüsü kancaları sunar.
Kullanılabilir Kancalar
Vue her aşama için olaylar yayınlar: @before-enter, @enter, @after-enter, @enter-cancelled ve bunlara karşılık gelen ayrılma kancaları.
<Transition
@before-enter="onBeforeEnter"
@enter="onEnter"
@after-enter="onAfterEnter"
@leave="onLeave"
>
<div v-if="show">Animated by JS</div>
</Transition>before-enter Başlangıç Durumunu Belirler
@before-enter DOM öğesini alır ve ekleme işleminden önce çalışır. Başlangıç stillerini, tıpkı bir enter-from sınıfının yapacağı gibi, burada ayarlayabilirsiniz.
function onBeforeEnter(el) {
el.style.opacity = 0;
el.style.transform = "translateY(20px)";
}enter, el ve done Değerlerini Alır
@enter iki bağımsız değişken alır: öğe ve bir done geri çağırma işlevi. Öğeyi canlandırdıktan sonra, Vue'nun geçişin sona erdiğini anlaması için işlem tamamlandığında done() işlevini çağırırsınız.
function onEnter(el, done) {
// animate to final state
el.style.transition = "all 0.4s ease";
el.style.opacity = 1;
el.style.transform = "translateY(0)";
el.addEventListener("transitionend", done, { once: true });
}done İşlevini Her Zaman Çağırın
done() işlevini çağırmayı unutursanız Vue sonsuza kadar bekler ve geçiş hiçbir zaman tamamlanmaz; after-enter hiç çalışmaz ve öğe yarım kalmış bir animasyon durumunda kalabilir. JS tarafından yürütülen kancalarda bu işlevi çağırmak zorunludur.
function onEnter(el, done) {
// ... animate ...
setTimeout(done, 400); // fallback if no transitionend
}leave ile done
@leave kancası da aynı şekilde çalışır: öğeyi dışarı doğru canlandırır, ardından Vue'nun öğeyi DOM'dan kaldırması için done() işlevini çağırırsınız.
function onLeave(el, done) {
el.style.transition = "all 0.3s ease";
el.style.opacity = 0;
el.addEventListener("transitionend", done, { once: true });
}Temizleme için after-enter
@after-enter, giriş geçişi tamamlandığında bir kez çalışır. Satır içi stilleri kaldırmak, geçiş özelliklerini sıfırlamak veya devam eden işlemleri başlatmak için kullanabilirsiniz.
function onAfterEnter(el) {
el.style.transition = "";
el.style.transform = "";
}:css="false" ile CSS'yi Atlayın
Animasyonu yalnızca JS ile yaptığınızda :css="false" ayarını kullanın. Bu, Vue'ya CSS sınıfı algılamasını tamamen atlamasını ve zamanlama için yalnızca done geri çağırma işlevlerinize güvenmesini söyler. Ayrıca CSS'nin yanlışlıkla müdahale etmesini önler.
<Transition
:css="false"
@enter="onEnter"
@leave="onLeave"
>
<div v-if="show">Pure JS animation</div>
</Transition>GSAP'yi Entegre Etme
JS kancaları animasyon kütüphaneleriyle özellikle kullanışlıdır. GSAP öğeye yumuşak bir animasyon uygulayabilir ve done işlevini onComplete geri çağırma işlevi olarak kabul edebilir.
function onEnter(el, done) {
gsap.from(el, {
opacity: 0,
y: 30,
duration: 0.4,
onComplete: done
});
}İptal Edilen Kancalar
@enter-cancelled ve @leave-cancelled, bir geçiş kesintiye uğradığında (örneğin kullanıcı hızlıca geçiş yaptığında) çalışır. Çalışan yumuşak animasyonları durdurmak ve geride kalmış durumları önlemek için bunları kullanın.
function onEnterCancelled(el) {
gsap.killTweensOf(el);
}JS Kancaları Ne Zaman Seçilmeli
Fizik kurallarına, öğeye göre değişen dinamik değerlere, kütüphane entegrasyonuna veya kesin bir işlem sıralamasına ihtiyaç duyduğunuzda JS kancalarını tercih edin. Basit belirmeler ve kaymalar için CSS sınıfları daha sade ve daha verimli kalır.
Kısa Kontrol
JavaScript kancalarıyla birlikte neden :css="false" kullanılır?
Özet
JS geçiş kancalarını öğrendiniz: @before-enter (başlangıç durumunu ayarlama), @enter/@leave (canlandırma ve ardından done işlevini çağırma), @after-enter (temizleme); ayrıca CSS sınıflarını devre dışı bırakmak için :css="false" ve kesintileri ele almak için iptal edilen kancalar.
Sıkça Sorulan Sorular
“JavaScript Geçiş Kancaları” dersi ücretsiz mi?
Evet — “JavaScript Geçiş Kancaları” 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.
“JavaScript Geçiş Kancaları” dersinde ne öğreneceğim?
@before-enter, @enter, @after-enter, @leave kancaları, karmaşık animasyonlar için GSAP kullanımı. 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 3. dersidir.
“JavaScript Geçiş Kancaları” 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