{"id":51,"date":"2021-09-11T00:04:04","date_gmt":"2021-09-10T21:04:04","guid":{"rendered":"https:\/\/onuryasar.online\/blog\/?p=51"},"modified":"2021-09-11T00:04:05","modified_gmt":"2021-09-10T21:04:05","slug":"react-componentlarina-fadein-fadeout-animasyonu-ekleme","status":"publish","type":"post","link":"https:\/\/onuryasar.online\/blog\/react-componentlarina-fadein-fadeout-animasyonu-ekleme\/","title":{"rendered":"React componentlar\u0131na fadeIn, fadeOut animasyonu ekleme"},"content":{"rendered":"\n

Bilindi\u011fi \u00fczere yeni nesil uygulamalar\u0131n aray\u00fcz tasar\u0131mlar\u0131nda animasyonlar\u0131n yeri olduk\u00e7a b\u00fcy\u00fck. Bundan dolay\u0131 bu yaz\u0131m\u0131zda olduk\u00e7a ra\u011fbet g\u00f6ren React k\u00fct\u00fcphanesinde harici bir k\u00fct\u00fcphane kullanmadan fadeIn ve fadeOut animasyonlar\u0131n\u0131, performans\u0131 etkilemeyecek \u015fekilde nas\u0131l yapabilece\u011fimizi \u00f6\u011frenece\u011fiz.<\/p>\n\n\n\n

\u00d6ncelikle animasyon ekleyece\u011fimiz componenti olu\u015fturmam\u0131z gerekiyor. Ben ekrana bir modal\u0131n gelmesini istiyorum. Bu y\u00fczden uygulamam\u0131n components klas\u00f6r\u00fcne Modal.js ad\u0131nda bir dosya olu\u015fturdum. Ard\u0131ndan bir component olu\u015fturmak i\u00e7in gerekli javascript kodlar\u0131m\u0131 yazmam gerekiyor. Ayr\u0131ca bu i\u015f i\u00e7in functional component kullanmay\u0131 tercih ediyorum. Bu k\u0131sm\u0131 bildi\u011finizi varsay\u0131yorum. E\u011fer bilmiyorsan\u0131z internette bunun hakk\u0131nda y\u00fczlerce yaz\u0131 hali haz\u0131rda bulunuyor.<\/p>\n\n\n\n

\"\"
Basit bir functional react component bu \u015fekilde g\u00f6r\u00fcn\u00fcyor.<\/figcaption><\/figure><\/div>\n\n\n\n

\u015eimdi s\u0131ra bu div elementine animasyonu nas\u0131l verece\u011fimize geldi. \u00d6ncelikle bu componentin g\u00f6r\u00fcn\u00fcr olup olmayaca\u011f\u0131 bilgisini almam\u0131z gerekiyor. Bunu da props \u00fczerinden state alarak yapaca\u011f\u0131z. Kodumuzdaki mState parametresi bu i\u015fimize yar\u0131yor olacak. \u015eimdi componentimizi sayfam\u0131za eklemeye ge\u00e7ebiliriz. \u00d6ncelikle sayfam\u0131z\u0131n fonksiyonunda componentimizin g\u00f6r\u00fcn\u00fcr olup olmayaca\u011f\u0131n\u0131 belirleyen bir state olu\u015fturmam\u0131z gerekiyor.<\/p>\n\n\n\n

\"\"
Functional componentlerde bu \u015fekilde state olu\u015fturmak m\u00fcmk\u00fcn.<\/figcaption><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

\"\"
Componentimizi bu \u015fekilde sayfam\u0131za ekliyoruz. Stateimizi de prop \u00fczerinden g\u00f6nderiyoruz.<\/figcaption><\/figure><\/div>\n\n\n\n

\u015eimdi tekrar component dosyam\u0131za gelebiliriz. fadeIn mi yoksa fadeOut animasyonunun mu ger\u00e7ekle\u015fece\u011fini belirlemek i\u00e7in componentimizin i\u00e7inde bir state daha olu\u015ftural\u0131m ve bu state’in default de\u011feri proptan ald\u0131\u011f\u0131m\u0131z state’in de\u011feri olsun.<\/p>\n\n\n\n

\"\"
Bu \u015fekilde g\u00f6r\u00fcnecektir.<\/figcaption><\/figure><\/div>\n\n\n\n

\u015eimdi div elementimizin \u00fczerinde bir tak\u0131m de\u011fi\u015fiklikler yapaca\u011f\u0131z. \u00d6ncelikle bir style attribute’\u00fc verelim ve animasyon isimlerimizi girelim. Burda \u00f6nemli olan k\u0131s\u0131m show state’imizin bu animasyonlardan hangisinin ger\u00e7ekle\u015fece\u011fini belirliyor olmas\u0131. Ayr\u0131ca bu div elementine bir kapatma butonu da ekleyelim. Daha sonra div elementimizin dinamik olarak var olup olmad\u0131\u011f\u0131n\u0131 berlirleyecek state’imizi de JSX’in bize sa\u011flad\u0131\u011f\u0131 olanaklar yard\u0131m\u0131yla kodumuza ekleyelim.<\/p>\n\n\n\n

\"\"
Bu i\u015flemler sonucunda da bu \u015fekilde g\u00f6r\u00fcnmesi gerekiyor. classNameler tabii ki size kalm\u0131\u015f. \u0130stedi\u011finiz class ismini verebilirsiniz.<\/figcaption><\/figure>\n\n\n\n

Farkettiyseniz \u00fcstteki kodumuzda iki tane fonksiyon \u00e7a\u011f\u0131r\u0131yoruz. Hadi \u015fimdi onlar\u0131 yazmaya ge\u00e7elim. closeModal fonksiyonu show state’imizi false yaparak animasyonumuzun fadeOut olarak de\u011fi\u015fmesini sa\u011flayacak. onAnimationEnd fonksiyonumuz ise animasyon biti\u015finde componentimizi dinamik olarak yok edecek. Sanki hi\u00e7 var olmam\u0131\u015f gibi \ud83d\ude42<\/p>\n\n\n\n

\"\"
Bu fonksiyonlar\u0131m\u0131z da bu \u015fekilde g\u00f6r\u00fcnmeli.<\/figcaption><\/figure><\/div>\n\n\n\n

Peki div elementimiz sanki hi\u00e7 var olmam\u0131\u015f gibi yok olduktan sonra tekrar nas\u0131l geri getirece\u011fiz? Bunun i\u00e7in de useEffect kullanaca\u011f\u0131z. useEffect ile state’deki de\u011fi\u015fimleri alg\u0131lay\u0131p show state’imizi tekrar true yapaca\u011f\u0131z.<\/p>\n\n\n\n

\"\"
Bunun i\u00e7in de yukar\u0131daki ufac\u0131k kod blo\u011fu i\u015fimizi g\u00f6r\u00fcyor.<\/figcaption><\/figure><\/div>\n\n\n\n

Yaz\u0131m\u0131z\u0131n sonuna gelmeden \u00f6nce fadeIn ve fadeOut keyframelerini css kodumuza da eklemeyi unutmayal\u0131m.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Css kodumuz da yandaki gibi g\u00f6r\u00fcnmeli. Animasyonu ger\u00e7ekle\u015ftirmek i\u00e7in tek yapmam\u0131z gereken sayfam\u0131zdaki state’i true veya false yapmak. Elimden geldi\u011fince React k\u00fct\u00fcphanesinde componentlar\u0131m\u0131za nas\u0131l animasyon ekleyebilece\u011fimizi anlatt\u0131m, umar\u0131m yeterince anla\u015f\u0131l\u0131r olmu\u015ftur. Okudu\u011funuz i\u00e7in te\u015fekk\u00fcrler. Ba\u015fka yaz\u0131larda g\u00f6r\u00fc\u015fmek \u00fczere…<\/p>\n\n\n\n

<\/p>\n\n\n\n

Bu kodlar\u0131 da kulland\u0131\u011f\u0131m\u0131z projemiz Cyclone’un github reposunu da ziyaret etmenizi \u00f6neririm. Geli\u015ftirmeye kat\u0131lmak isterseniz sosyal medya hesaplar\u0131mdan bana ula\u015fabilirsiniz.<\/p>\n\n\n\n

Cyclone Github Repo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Bilindi\u011fi \u00fczere yeni nesil uygulamalar\u0131n aray\u00fcz tasar\u0131mlar\u0131nda animasyonlar\u0131n yeri olduk\u00e7a b\u00fcy\u00fck. Bundan dolay\u0131 bu yaz\u0131m\u0131zda olduk\u00e7a ra\u011fbet g\u00f6ren React k\u00fct\u00fcphanesinde harici bir k\u00fct\u00fcphane kullanmadan fadeIn…<\/p>\n

Devam\u0131n\u0131 OkuReact componentlar\u0131na fadeIn, fadeOut animasyonu ekleme<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":63,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,23],"tags":[27,25,24,26],"class_list":["post-51","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-node-js","category-react","tag-react-componentlarina-animasyon-ekleme","tag-react-componentlarina-fade-in-ve-fade-out-animasyonu-ekleme","tag-react-js-componentlerine-fade-in-ve-fade-out-animasyonlari-ekleme","tag-reactte-componentlara-fade-in-ve-fade-out-animasyonu-ekleme","entry"],"_links":{"self":[{"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":3,"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/posts\/51\/revisions\/65"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/media\/63"}],"wp:attachment":[{"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onuryasar.online\/blog\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}