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.
Ş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.
Ş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.
Ş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.
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 🙂
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.
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.
