İletişim Penceresini Açma ve Kapatma Animasyonu
Akıcı bir kullanıcı deneyimi için Tailwind geçiş yardımcı sınıflarını JavaScript sınıf geçişleriyle birleştirerek iletişim penceresinin giriş ve çıkışını canlandırın.
İletişim Penceresini Açma ve Kapatma Animasyonu, CoddyKit'te ücretsiz bir Tailwind CSS 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, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Modalları Neden Canlandırmalıyız
Bir modal penceresinin açılışını ve kapanışını canlandırmak, estetik görünümün ötesinde işlevsel bir amaca hizmet eder. Ani bir görünüm kullanıcıları irkiltebilir; yumuşak bir belirme efekti, modalın gelişini bağlama oturtur ve kullanıcıların nereden geldiğini anlamasına yardımcı olur. Kapanış animasyonu, etkileşimin tamamlandığını ve kullanıcının sayfaya geri döndüğünü bildirir.
Tailwind'in geçiş yardımcı sınıfları, opaklık ve ölçeği birlikte canlandırmayı kolaylaştırarak yerel mobil arayüz kalıplarının kalitesiyle örtüşen özenli bir belirme ve ölçekleme efekti oluşturur.
Beliren Arka Plan Animasyonu
Arka plan, modal açıldığında belirmeli ve modal kapandığında kaybolmalıdır. Arka plan elementine transition-opacity duration-300 ekleyin. JavaScript aracılığıyla opacity-0 (gizli) ile opacity-100 (görünür) arasında geçiş yapın.
Belirme efektinin çalışması için arka plan DOM'da kalmalıdır (hidden kullanmayın); bunun yerine başlangıçta opacity-0 pointer-events-none olarak ayarlayın ve opacity-100 pointer-events-auto değerine geçirin.
<!-- Backdrop with fade -->
<div
id="backdrop"
onclick="closeModal()"
class="fixed inset-0 bg-black/50 z-40
transition-opacity duration-300
opacity-0 pointer-events-none">
</div>
<script>
function openModal() {
document.getElementById('backdrop').classList.remove('opacity-0', 'pointer-events-none');
document.getElementById('backdrop').classList.add('opacity-100', 'pointer-events-auto');
}
function closeModal() {
document.getElementById('backdrop').classList.remove('opacity-100', 'pointer-events-auto');
document.getElementById('backdrop').classList.add('opacity-0', 'pointer-events-none');
}
</script>Diyaloğun Ölçeklenerek Belirmesi
En yaygın modal açılış animasyonu, belirerek büyümedir: diyalog biraz daha küçük ve saydam başlar, ardından opaklaşırken tam boyutuna ulaşır. Bu, modalların iOS ve Android'de görünme biçimini taklit eder.
Diyalog paneline transition-all duration-300 ekleyin. scale-95 opacity-0 (başlangıçtaki gizli durum) ile scale-100 opacity-100 (görünür durum) arasında geçiş yapın. 300 ms'lik kısa süre, animasyonun seri kalmasını sağlar.
<!-- Dialog panel -->
<div
id="dialog"
class="bg-white rounded-2xl shadow-2xl w-full max-w-md
transition-all duration-300
scale-95 opacity-0 pointer-events-none">
<!-- content -->
</div>
<script>
function openModal() {
const d = document.getElementById('dialog');
d.classList.remove('scale-95', 'opacity-0', 'pointer-events-none');
d.classList.add('scale-100', 'opacity-100', 'pointer-events-auto');
}
function closeModal() {
const d = document.getElementById('dialog');
d.classList.remove('scale-100', 'opacity-100', 'pointer-events-auto');
d.classList.add('scale-95', 'opacity-0', 'pointer-events-none');
}
</script>Mobil Sayfalar İçin Yukarı Kayma Animasyonu
Mobil cihazlarda alt sayfa, ekranın ortasında görünmek yerine ekranın altından yukarı doğru kayar. Bu, başparmakla etkileşim için daha ergonomiktir. Paneli alta sabitlemek için fixed bottom-0 inset-x-0 kullanın; başlangıçtaki gizli durum olarak translate-y-full değerini belirleyip bunu translate-y-0 değerine geçirin.
Kaydırılabileceğini belirtmek için üst kısma bir sürükleme tutamacı (w-10 h-1 rounded-full bg-gray-300 mx-auto mt-3) ekleyin.
<div
id="sheet"
class="fixed bottom-0 inset-x-0 z-50 bg-white rounded-t-2xl shadow-2xl
transition-transform duration-300 ease-out
translate-y-full">
<!-- Drag handle -->
<div class="w-10 h-1 rounded-full bg-gray-300 mx-auto mt-3"></div>
<div class="px-6 py-5">
<h2 class="text-lg font-semibold text-gray-900">Share</h2>
<p class="mt-2 text-sm text-gray-600">Choose how you want to share this item.</p>
</div>
<div class="flex justify-end gap-3 px-6 pb-6">
<button onclick="closeSheet()" class="px-4 py-2 text-sm font-semibold border border-gray-300 rounded-lg">Cancel</button>
<button class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Share</button>
</div>
</div>Akıcı Animasyonlar İçin Yumuşatma İşlevleri
Zamanlama işlevi, bir animasyonun nasıl hızlanıp yavaşlayacağını belirler. Tailwind dört yumuşatma yardımcı sınıfı sunar: ease-linear, ease-in, ease-out ve ease-in-out.
Modal açılışlarında ease-out kullanın; element hızlı başlar ve son konumuna ulaşırken yavaşlar. Bu, doğal ve tatmin edici bir his verir. Kapanışlarda ease-in kullanın; element ayrılırken hızlanır ve bu da hareketi amaçlı hissettirir. ease-in-out, toggle işlemleri gibi geri döndürülebilir geçişlerde iyi çalışır.
<!-- Entrance: fast start, slow end -->
<div class="transition-all duration-300 ease-out
scale-95 opacity-0">
Modal entering
</div>
<!-- Exit: slow start, fast end -->
<div class="transition-all duration-200 ease-in
scale-95 opacity-0">
Modal exiting
</div>Kapanış Animasyonunun Tamamlanmasını Bekleme
Yaygın bir hata, kapatma tetiklendiğinde modalı DOM'dan hemen kaldırmak (veya hidden ile gizlemek) olur. Bu, kapanış animasyonunu yarıda keser. Bunun yerine elementi gizlemeden önce transitionend olayını kullanarak animasyonun tamamlanmasını bekleyin.
İşleyicinin her geçişte yalnızca bir kez çalışması ve birikmemesi için olayı { once: true } ile dinleyin. Geçişten sonra, görünmez elementle kullanıcı etkileşimini engellemek için hidden veya pointer-events-none ekleyin.
<script>
function closeModal() {
const dialog = document.getElementById('dialog');
const backdrop = document.getElementById('backdrop');
// Start exit animation
dialog.classList.remove('scale-100', 'opacity-100');
dialog.classList.add('scale-95', 'opacity-0');
backdrop.classList.remove('opacity-100');
backdrop.classList.add('opacity-0');
// Wait for animation to finish, then hide
dialog.addEventListener('transitionend', () => {
dialog.classList.add('pointer-events-none');
backdrop.classList.add('pointer-events-none');
document.body.classList.remove('overflow-hidden');
}, { once: true });
}
</script>Arka Plan ve Diyalog İçin Kademeli Animasyon
Arka planı ve diyaloğu tam olarak aynı anda açmak ani bir his verebilir. Kademeli animasyon, önce arka planı, ardından saniyenin küçük bir bölümü kadar sonra diyaloğu açarak katmanlı bir ortaya çıkma efekti oluşturur.
Bunu, diyalog elementine delay-100 sınıfını ekleyerek gerçekleştirin; böylece geçişi arka planın geçişinden 100 ms sonra başlar. Kapanış dizisini hızlı tutmak için kapanışta gecikmeyi kaldırın.
<!-- Backdrop: starts immediately -->
<div id="backdrop"
class="fixed inset-0 bg-black/50 z-40
transition-opacity duration-300
opacity-0 pointer-events-none">
</div>
<!-- Dialog: starts 100ms after backdrop -->
<div id="dialog"
class="bg-white rounded-2xl shadow-2xl w-full max-w-md
transition-all duration-300 delay-100
scale-90 opacity-0 pointer-events-none">
<!-- content -->
</div>
<!-- On open: add opacity-100 to backdrop, then scale-100/opacity-100 to dialog (delay-100 handles the stagger) -->
<!-- On close: remove delay-100 from dialog before starting the exit --></i>Yakınlaştırarak Beliren Uyarı Modali
Kritik uyarılarda (hatalar, geri döndürülemez işlemlerin onayları), yakınlaştırarak belirme efekti yumuşak bir ölçeklemeden daha fazla dikkat çeker. Diyaloğu scale-50 ile başlatın ve dikkat çekici, hızlı bir ortaya çıkma efekti için duration-150 ile scale-100 değerine canlandırın.
Bunu ölçülü kullanın; aşırı dramatik animasyonlar kullanıcıların duyarlılığını azaltır. Yakınlaştırarak belirme efektini, kullanıcının bölünmemiş dikkatine gerçekten ihtiyaç duyduğunuz önemli istemlerle sınırlayın.
<!-- Zoom-in alert -->
<div
id="alert-dialog"
class="bg-white rounded-2xl shadow-2xl w-full max-w-sm
transition-all duration-150 ease-out
scale-50 opacity-0">
<div class="p-6 text-center">
<div class="mx-auto w-14 h-14 rounded-full bg-red-100 flex items-center justify-center">
<svg class="w-7 h-7 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
</div>
<h2 class="mt-4 text-lg font-bold text-gray-900">Critical Error</h2>
<p class="mt-2 text-sm text-gray-500">Your session has expired. Please log in again.</p>
<button class="mt-5 w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg">Sign In Again</button>
</div>
</div>CSS Sınıflarıyla Animasyon ve Satır İçi Stillerle Animasyon
Tailwind'de modal animasyonu için iki yaklaşım vardır: sınıf geçişi (şimdiye kadar yaptığımız) ve JavaScript aracılığıyla satır içi stil değişikliği. Sınıf geçişi, Tailwind yaklaşımıdır; stilleri HTML sınıflarında, davranışı ise JavaScript'te temiz biçimde ayrı tutar.
Satır içi stil değişikliği (element.style.opacity = '0'), önce yardımcı sınıfları kullanan yaklaşımı bozar ve stillerin denetlenmesini zorlaştırır. Kullanıcı etkileşimindeki koordinatlara göre canlandırılan konumlar gibi önceden belirlenemeyen dinamik değerlere ihtiyacınız yoksa sınıf geçişini kullanın.
// Class toggling (Tailwind approach) — preferred
function openModal() {
dialog.classList.remove('scale-95', 'opacity-0');
dialog.classList.add('scale-100', 'opacity-100');
}
// Inline style approach — avoid unless necessary
function openModalInline() {
dialog.style.transform = 'scale(1)';
dialog.style.opacity = '1';
// Hard to maintain, not visible in HTML
}Azaltılmış Hareket Tercihlerine Uyma
Bazı kullanıcılar arayüz animasyonları nedeniyle taşıt tutması yaşayabilir. CSS ve Tailwind, prefers-reduced-motion medya sorgusuna uyar. İşletim sistemi ayarlarında azaltılmış hareket isteyen kullanıcılar için geçişleri devre dışı bırakmak üzere canlandırılan elementlerde motion-reduce:transition-none ve motion-reduce:transform-none kullanın.
Bu, çoğu zaman gözden kaçan bir erişilebilirlik gereksinimidir. Bu yardımcı sınıfları eklemek, canlandırılan modallarınızın rahatsızlığa veya hareket hassasiyeti sorunlarına yol açmamasını sağlar.
<div
id="dialog"
class="bg-white rounded-2xl shadow-2xl w-full max-w-md
transition-all duration-300 ease-out
motion-reduce:transition-none
scale-95 opacity-0">
<!-- dialog content -->
</div>Kısa Bildirim Animasyonu
Kısa bildirim, ekranın üst veya alt köşesinden kayan, geçici ve kullanıcıyı engellemeyen bir mesajdır. Konumlandırma için fixed bottom-4 right-4 z-50 kullanın ve başlangıçta translate-y-2 opacity-0 değerleriyle başlatıp translate-y-0 opacity-100 değerlerine geçirerek canlandırın.
setTimeout kullanarak kısa bildirimi birkaç saniye sonra otomatik olarak kapatın. Tailwind'in transition-all duration-300 sınıfı, hem açılışı hem de otomatik kapanıştaki belirme efektini akıcı biçimde yönetir.
<!-- Toast element -->
<div
id="toast"
class="fixed bottom-4 right-4 z-50
flex items-center gap-3 px-4 py-3 bg-gray-900 text-white text-sm rounded-xl shadow-xl
transition-all duration-300
translate-y-2 opacity-0 pointer-events-none">
<svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
</svg>
Changes saved successfully!
</div>
<script>
function showToast() {
const t = document.getElementById('toast');
t.classList.remove('translate-y-2', 'opacity-0', 'pointer-events-none');
t.classList.add('translate-y-0', 'opacity-100');
setTimeout(() => {
t.classList.remove('translate-y-0', 'opacity-100');
t.classList.add('translate-y-2', 'opacity-0', 'pointer-events-none');
}, 3000);
}
</script>Hızlı Kontrol
Bu derste ele alınan Tailwind CSS Uzmanlığı kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: modal animasyonları, transition-all duration-300 ile opaklık ve ölçek yardımcı sınıfları arasında (scale-95 opacity-0 değerlerinden scale-100 opacity-100 değerlerine) geçiş yapılarak çalışır; kapanış animasyonları, elementi gizlemeden önce transitionend olayının beklenmesini gerektirir; hareket erişilebilirliği ise işletim sisteminin prefers-reduced-motion ayarına uymak için motion-reduce:transition-none ile sağlanır. Sırada açılır menüleri oluşturacağız.
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
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“İletişim Penceresini Açma ve Kapatma Animasyonu” dersi ücretsiz mi?
Evet — “İletişim Penceresini Açma ve Kapatma Animasyonu” 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 Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“İletişim Penceresini Açma ve Kapatma Animasyonu” dersinde ne öğreneceğim?
Akıcı bir kullanıcı deneyimi için Tailwind geçiş yardımcı sınıflarını JavaScript sınıf geçişleriyle birleştirerek iletişim penceresinin giriş ve çıkışını canlandırın. Tailwind CSS 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.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS 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.
“İletişim Penceresini Açma ve Kapatma Animasyonu” 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 Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS 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
- İletişim Penceresi Yapısı
- İletişim Penceresini Açma ve Kapatma Animasyonu
- Açılır Menü Bileşeni
- Erişilebilir İletişim Pencereleri ve Açılır Menüler