React Durum Değişiklikleriyle CSS Geçişleri

Bir CSS transition özelliği, bir özelliği iki değer arasında zaman içinde yumuşak biçimde ara değerleyerek değiştirir; değişim aniden gerçekleşmez. Bu özelliği, öğe üzerinde transition: property duration timing-function delay bildirimiyle tanımlarsınız.

React'te satır içi değerleri genellikle elle canlandırmazsınız. Bunun yerine durumla bir sınıfı veya stili değiştirirsiniz; aradaki kareleri CSS sizin için yönetir.

Yaygın yaklaşım, useState içinde bir Boole değeri tutmak ve bu değer değiştiğinde bir CSS sınıfını değiştirmektir. Sınıf değiştiğinde hedef özellik yeni bir değer alır ve CSS aradaki farkı canlandırır.

Örneğin isOpen, öğenin open sınıfına sahip olup olmadığını belirler; open sınıfı da farklı bir yükseklik veya dönüşüm belirler.

Tipik bir kurulum şöyledir: const [isVisible, setIsVisible] = useState(false). Bir düğme, durumu değiştirmek için setIsVisible(v => !v) çağrısını yapar.

İşlevsel güncelleyici olan v => !v ifadesini kullanmak, birkaç güncelleme aynı anda kuyruğa alındığında güncel olmayan durumun kullanılmasını önler ve değiştirmenin güvenilir kalmasını sağlar.

Sınıf adını dinamik olarak oluşturursunuz: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. Temel sınıf geçiş bildirimini içerir; değiştirici sınıflar ise başlangıç ve bitiş değerlerini içerir.

transition bildirimini her zaman bulunan temel sınıfta tutmak, animasyonun açılma ve kapanma olmak üzere her iki yönde de çalışmasını sağlar.

Birden çok özelliği aynı anda, bunları listeleyerek canlandırabilirsiniz: transition: transform 300ms ease, opacity 300ms ease. Solma ve kayma etkisi, opacity değişimini transform üzerindeki bir translateY değişimiyle birleştirir.

Her ikisini birlikte canlandırmak, öğenin yukarı doğru kayarken aynı zamanda görünür hâle geldiği özenli bir giriş sağlar.

transition-delay, bir geçişin başlangıcını erteler. Liste öğelerine giderek artan gecikmeler vererek her öğenin bir öncekinden biraz sonra canlandığı kademeli bir akış oluşturabilirsiniz.

React'te gecikmeyi satır içinde hesaplayabilirsiniz; örneğin style={{ transitionDelay: index * 50 + 'ms' }}.

display özelliği canlandırılamaz; çünkü none ile block arasında ara değerleri yoktur. Bu özelliğe geçiş uygulamak solma yerine anlık bir sıçrama oluşturur.

Bunun yerine görsel solma için opacity özelliğini canlandırın ve gizli öğenin görünmezken tıklamaları yok sayması için işaretçi olaylarını devre dışı bırakın: pointer-events: none.

Zamanlama işlevi, hızın süre boyunca nasıl değişeceğini biçimlendirir. linear sabit hızda ilerler, ease yavaş başlayıp yavaş biter ve cubic-bezier(...) tamamen özel bir eğri tanımlamanızı sağlar.

Özel eğriler hızlı veya esnek hisler oluşturmak için harikadır; örneğin cubic-bezier(0.34, 1.56, 0.64, 1) hafif bir aşım sağlar.

Süreleri --speed: 300ms gibi CSS özel özelliklerinde saklayıp yeniden kullanabilirsiniz: transition: opacity var(--speed) ease. Bu, bileşenler arasındaki zamanlamayı tutarlı tutar.

React, değişkeni style={{ '--speed': '500ms' }} aracılığıyla satır içinde bile ayarlayabilir; böylece özellikler animasyon zamanlamasını belirleyebilir.

Tarayıcılar transform ve opacity özelliklerini düzeni yeniden hesaplamadan veya yeniden boyamadan GPU birleştiricisi üzerinde canlandırabilir. width, top veya margin gibi özellikleri canlandırmak her karede düzen çalışması gerektirir ve takılmalara yol açabilir.

Taşımanız, ölçeklemeniz veya döndürmeniz gerektiğinde transform özelliğini; solma efekti gerektiğinde opacity özelliğini tercih edin.

React'te güvenilir bir geçiş; Boole durumunu, koşullu bir değiştirici sınıfı ve GPU açısından verimli özelliklerde transition bildiren bir temel sınıfı birleştirir. Durum sınıfı değiştirir, canlandırmayı ise CSS gerçekleştirir.

Bu yaklaşım, bileşenlerinizi bildirimsel tutarken akıcı hareket üretmek için tarayıcıdan yararlanmanızı sağlar.

Performanslı animasyon konusundaki anlayışınızı sınayın.

Durumla yönetilen sınıfları değiştirerek CSS geçişlerini tetiklemeyi, transform ve opacity'yi birlikte canlandırmayı, gecikmelerle kademelendirme yapmayı ve opacity ile işaretçi olaylarını kullanarak display geçişinden kaçınmayı öğrendiniz.

Ayrıca zamanlama işlevlerini, CSS değişkenleriyle tanımlanan süreleri ve GPU tarafından birleştirilen özelliklerin hareketi neden akıcı tuttuğunu gördünüz.