İçeriğe geç

React componentlarına fadeIn, fadeOut animasyonu ekleme

Kategori: JavaScript, Node.js, ve React

Bilindiği üzere yeni nesil uygulamaların arayüz tasarımlarında animasyonların yeri oldukça büyük. Bundan dolayı bu yazımızda oldukça rağbet gören React kütüphanesinde harici bir kütüphane kullanmadan fadeIn ve fadeOut animasyonlarını, performansı etkilemeyecek şekilde nasıl yapabileceğimizi öğreneceğiz.

Öncelikle animasyon ekleyeceğimiz componenti oluşturmamız gerekiyor. Ben ekrana bir modalın gelmesini istiyorum. Bu yüzden uygulamamın components klasörüne Modal.js adında bir dosya oluşturdum. Ardından bir component oluşturmak için gerekli javascript kodlarımı yazmam gerekiyor. Ayrıca bu iş için functional component kullanmayı tercih ediyorum. Bu kısmı bildiğinizi varsayıyorum. Eğer bilmiyorsanız internette bunun hakkında yüzlerce yazı hali hazırda bulunuyor.

Basit bir functional react component bu şekilde görünüyor.

Şimdi sıra bu div elementine animasyonu nasıl vereceğimize geldi. Öncelikle bu componentin görünür olup olmayacağı bilgisini almamız gerekiyor. Bunu da props üzerinden state alarak yapacağız. Kodumuzdaki mState parametresi bu işimize yarıyor olacak. Şimdi componentimizi sayfamıza eklemeye geçebiliriz. Öncelikle sayfamızın fonksiyonunda componentimizin görünür olup olmayacağını belirleyen bir state oluşturmamız gerekiyor.

Functional componentlerde bu şekilde state oluşturmak mümkün.

Componentimizi bu şekilde sayfamıza ekliyoruz. Stateimizi de prop üzerinden gönderiyoruz.

Şimdi tekrar component dosyamıza gelebiliriz. fadeIn mi yoksa fadeOut animasyonunun mu gerçekleşeceğini belirlemek için componentimizin içinde bir state daha oluşturalım ve bu state’in default değeri proptan aldığımız state’in değeri olsun.

Bu şekilde görünecektir.

Şimdi div elementimizin üzerinde bir takım değişiklikler yapacağız. Öncelikle bir style attribute’ü verelim ve animasyon isimlerimizi girelim. Burda önemli olan kısım show state’imizin bu animasyonlardan hangisinin gerçekleşeceğini belirliyor olması. Ayrıca bu div elementine bir kapatma butonu da ekleyelim. Daha sonra div elementimizin dinamik olarak var olup olmadığını berlirleyecek state’imizi de JSX’in bize sağladığı olanaklar yardımıyla kodumuza ekleyelim.

Bu işlemler sonucunda da bu şekilde görünmesi gerekiyor. classNameler tabii ki size kalmış. İstediğiniz class ismini verebilirsiniz.

Farkettiyseniz üstteki kodumuzda iki tane fonksiyon çağırıyoruz. Hadi şimdi onları yazmaya geçelim. closeModal fonksiyonu show state’imizi false yaparak animasyonumuzun fadeOut olarak değişmesini sağlayacak. onAnimationEnd fonksiyonumuz ise animasyon bitişinde componentimizi dinamik olarak yok edecek. Sanki hiç var olmamış gibi 🙂

Bu fonksiyonlarımız da bu şekilde görünmeli.

Peki div elementimiz sanki hiç var olmamış gibi yok olduktan sonra tekrar nasıl geri getireceğiz? Bunun için de useEffect kullanacağız. useEffect ile state’deki değişimleri algılayıp show state’imizi tekrar true yapacağız.

Bunun için de yukarıdaki ufacık kod bloğu işimizi görüyor.

Yazımızın sonuna gelmeden önce fadeIn ve fadeOut keyframelerini css kodumuza da eklemeyi unutmayalım.

Css kodumuz da yandaki gibi görünmeli. Animasyonu gerçekleştirmek için tek yapmamız gereken sayfamızdaki state’i true veya false yapmak. Elimden geldiğince React kütüphanesinde componentlarımıza nasıl animasyon ekleyebileceğimizi anlattım, umarım yeterince anlaşılır olmuştur. Okuduğunuz için teşekkürler. Başka yazılarda görüşmek üzere…

Bu kodları da kullandığımız projemiz Cyclone’un github reposunu da ziyaret etmenizi öneririm. Geliştirmeye katılmak isterseniz sosyal medya hesaplarımdan bana ulaşabilirsiniz.

Cyclone Github Repo

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.