CSS Geçişleri ve Animasyonları
CSS'te transition özelliği, ana kare animasyonları, Vue Transition ile Animate.css kullanımı.
CSS Geçişleri ve Animasyonları, 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.
CSS'de Canlandırmanın İki Yolu
CSS, Vue geçişleriyle mükemmel uyum sağlayan iki araç sunar: transition özelliği (iki durum arasında ara değerler oluşturur) ve @keyframes ile animation (çok adımlı zaman çizelgeleri). Vue her ikisini de çalıştırabilir.
Geçiş Kısa Yazımı
transition kısa yazımı; özelliği, süreyi, zamanlama işlevini ve gecikmeyi tek satırda birleştirir. Sıra şöyledir: özellik, süre, yumuşatma, gecikme.
.box {
/* property duration easing delay */
transition: transform 0.4s ease-in-out 0s;
}Birden Çok Özellikte Geçiş
Birden çok geçişi virgüllerle ayırın. Kaydırma ve solma etkisi için dönüşüm ile saydamlığı birlikte canlandırabilirsiniz.
.slide-enter-active,
.slide-leave-active {
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.slide-enter-from {
transform: translateX(20px);
opacity: 0;
}Geçiş Yeterli Olmadığında
transition yalnızca iki durum arasındaki geçişi canlandırır. Sıçrama, titreşim veya çok aşamalı hareket için birçok ara nokta tanımlamanızı sağlayan @keyframes gerekir.
Keyframe'leri Tanımlama
@keyframes, yüzdeleri (veya from/to) kullanarak bir durum dizisine ad verir. Her durak, zaman çizelgesindeki o noktadaki stilleri açıklar.
@keyframes bounce-in {
0% { transform: scale(0); }
60% { transform: scale(1.1); }
100% { transform: scale(1); }
}Animasyon Özelliği
Bir keyframe kümesini animation kısa yazımıyla uygulayın: ad, süre, zamanlama işlevi, gecikme, yineleme sayısı, yön.
.bounce-enter-active {
animation: bounce-in 0.5s ease both;
}Keyframe'leri Geçişe Bağlama
Eklenme sırasında oynatılması için animasyonu enter-active sınıfına ekleyin. Çıkış sırasında aynı keyframe'leri ters yönde çalıştırın.
.bounce-leave-active {
animation: bounce-in 0.5s ease reverse both;
}Animate.css Kullanımı
Animate.css, hazır keyframe animasyonlarından oluşan bir kütüphanedir. Kendi sınıflarınızı yazmak yerine, özel sınıf özellikleri aracılığıyla Vue'ya doğrudan Animate.css sınıflarını kullanmasını söylersiniz.
<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->enter-active-class ve leave-active-class
<Transition>, oluşturulan sınıf adlarını geçersiz kılmak için özellikleri kabul eder. enter-active-class ve leave-active-class, herhangi bir harici sınıfı eklemenizi sağlar; bu özellikler Animate.css için idealdir.
<Transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="show">Animated by Animate.css</div>
</Transition>Süreyi Açıkça Belirtme
CSS zamanlaması belirsiz olduğunda (animasyon ile geçiş birlikte kullanıldığında), Vue'nun sınıfları ne zaman kaldıracağını tam olarak bilmesi için duration özelliğini ayarlayın. Bu özellik bir sayı veya giriş/çıkış değerlerini içeren bir nesne kabul eder.
<Transition :duration="{ enter: 500, leave: 300 }">
<div v-if="show">Precise timing</div>
</Transition>Yumuşatma İşlevleri Önemlidir
Zamanlama işlevi, hareketin nasıl hissedildiğini belirler. ease-out girişte, ease-in çıkışta duyarlı bir his verir; cubic-bezier() ise tam denetim sağlar.
.pop-enter-active {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}Hızlı Kontrol
Giriş sırasında bir Animate.css sınıfı uygulamanızı sağlayan özellik hangisidir?
Özet
transition kısaltmasını (iki durumlu aradeğerleme) @keyframes ve animation ile (çok adımlı zaman çizelgeleri) karşılaştırdınız; ayrıca Animate.css'i enter-active-class ve leave-active-class özellikleri üzerinden, kesin zamanlama için duration kullanarak entegre etmeyi öğrendiniz.
Sıkça Sorulan Sorular
“CSS Geçişleri ve Animasyonları” dersi ücretsiz mi?
Evet — “CSS Geçişleri ve Animasyonları” 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.
“CSS Geçişleri ve Animasyonları” dersinde ne öğreneceğim?
CSS'te transition özelliği, ana kare animasyonları, Vue Transition ile Animate.css 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 2. dersidir.
“CSS Geçişleri ve Animasyonları” 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