React’te kaydırmalı dönüşümler elde etmek için kaydırma kitaplıklarını kullanabilirsiniz. Bu kitaplıklar, bir bileşen bağlanmadan önce kodu çalıştırarak kaydırma animasyonlarını tetikler. Scroll olay dinleyicisi, bileşenin useLayoutEffect özelliğine eklenmelidir.
ReactCSSTransitionGroup
React uygulamanızda kayan dönüşümler oluşturmak için DOM’a bir CSS geçiş grubu eklemeniz gerekir. Bir ReactCSSTransitionGroup kullanıyorsanız, mount özelliğini true olarak ayarlayabilir veya özel geçişler oluşturmak için API’yi kullanabilirsiniz.
ReactCSSTransitionGroup, geçiş aşamalarını tanımlayan ve basit bileşenlere erişim sağlayan bir pakettir. API uyumlu olması ve temel CSS animasyonlarına ve geçişlerine izin vermesi bakımından ng-animate’e benzer. Paket, ReactTransitionGroup’u temel alır ve bu geçişlerin uygulanmasını çok daha kolay hale getirir.
ReactCSSTransitionGroup, ilk montajda React uygulamanıza ekstra bir geçiş aşaması ekleyen geçişAppear adlı isteğe bağlı bir destek sunar. Varsayılan değer false’tur, ancak kullanıcı sayfayı ilk kez bağladığında geçişin görünmesini sağlamak için prop’u true olarak ayarlayabilirsiniz. Geçiş grubunu uygulamanıza eklerseniz, çocuklar ilk binişte görünür ve daha sonra eklenen tüm çocuklar girer ancak görünmez. Bu, ReactCSSTransitionGroup’un yeni bir özelliğidir ve 0.13 ve sonraki sürümlerinde bulunur.
Kaydırma dönüşümleri etkileşimlidir. ScrollAnimation bileşeni, bir öğenin konumuna göre kaydırma animasyonlarını tetikler. “Yapışkan” kaydırma için bir resim yazısı öğesine bir resim yazısı ekleyebilirsiniz.
Düzen Animasyon
React’te Kaydırmalı Dönüşümleri kullanmak, ilgi çekici bir kullanıcı deneyimi sağlamanın harika bir yoludur. Bu animasyonlar yalnızca bileşenler arasında yumuşak bir geçiş sağlamakla kalmaz, aynı zamanda kullanıcının dikkatini React uygulamanızın belirli alanlarına da çekebilir. Kaydırma animasyonları hem etkileşimli hem de statik bileşenlerde kullanılabilir.
Kaydırma tabanlı paralaks animasyonları genellikle web’de görülür. Örnekler Goonies web sitesini ve Apple’ın ürün tanıtımını içerir. Bunlara aşina değilseniz, genellikle bir öğe görünüm alanına çarptığında önceden tanımlanmış bir geçişi tetikleyen mevcut bir kitaplık kullanılarak elde edilirler. Kullanıcı en üste döndüğünde animasyon kendini tersine çevirir.
React’te, kaydırma dönüşümleri, bir öğenin opaklığını ve animasyonSüresini değiştirerek çalışır. Bu dönüşümleri kullanarak, kaydırılan içeriğe göre görünümün yüksekliğini veya genişliğini ve konumunu değiştirebilirsiniz. Opaklığını ayarlayarak kaydırma öğesinin görünümünü de değiştirebilirsiniz.
Kaydırmalı Dönüşümler, bir ReactJS kitaplığı ile kolayca oluşturulabilir. Tek yapmanız gereken ReactCSSTransitionGroup’u DOM’a monte etmek ve anahtar niteliğini true olarak ayarlamak. Bunu yaptıktan sonra, öğeye bir animasyon uygulayabilir ve bunu React uygulamanızda kullanabilirsiniz.
Intersection Observer
Kaydırmak için daha önce bir tarayıcı kullandıysanız, Reaction uygulamanız için kaydırma dönüşümleri oluşturan bir React bileşeni olan Intersection Observer’ı bilirsiniz. Bileşen başlatmaya bağlanarak ve yalnızca bileşen görünüm penceresinin içindeyse başlatmaya devam ederek çalışır. Bu kitaplık geniş çapta benimsenmemiştir, ancak React uygulamanızda kaydırmayı uygulamak için kullanışlı bir araçtır.
Intersection Observer API, öğelerin kesişimini kontrol ederek ReAct uygulamanız için kaydırma dönüşümleri oluşturur. Ardından, kesişmeye dayalı olarak CSS animasyonlarını uygular ve kaldırır. Kod ayrıca, kök boyutunu doldurmak için kullanılabilecek rootMargin değerlerini dikkate alarak çalışır.
Kavşak Gözlemcisi, bir kavşak değişikliğini her gözlemlediğinde bir geri arama işlevi çağırır. Geri arama iki parametre alır: hedef ve gözlemciler. İlk parametre, etkilenecek öğeyi temsil eder. İkinci parametre, gözlemci hakkında bilgi içerir. Bu bilgi bir seçenekler nesnesinde saklanır.
İsteğe bağlı bir özellik olan rootMargin, kök öğeyi artıracak veya azaltacak şekilde ayarlanabilir. Değeri yüzde olarak belirtin. Bu değer aynı zamanda, hedef öğenin ne kadarının görünür olacağına ilişkin bir eşik olan bir eşiği belirlemek için de kullanılır. Eşik 1.0 ise, hedef elemanın her pikseli görünene kadar gözlemci ateşlenmeyecektir. Aksi takdirde, öğe görünüm dışında olacaktır.
Yorum Yok