react-transition-group ile Arka Plan Kaydırıcı (Background Slider)

Öncelikle, bu makaleyi yazmaktaki motivasyonum nedir? Web sitemde harika bir görünüm elde etmek için kayan arka plan animasyonu kullanmam gerekiyordu. Ekosistemde bazı hazır carousel bileşenleri olduğunu biliyorum ancak kendi durumuma yönelik hemen kullanabileceğim (drag and drop) bir çözüm bulamadım. İhtiyacım olan şey, farklı bir rota seçildiğinde (evet, react-router da işin içinde!) kayan bir arka plan animasyonuydu.

Bu yolculuk sırasında birkaç sorunla karşılaştım. Bulduğum makaleler, resmi dokümantasyona göre artık react-transition-group paketine taşınan react-addons-css-transition-group paketini kullanıyordu. İkinci olarak, paketin yeni dokümantasyonuyla oldukça uğraştım. Arkama yaslanıp memnuniyetle sonucumu izleyene kadar birkaç deneme yanılma durumu yaşadım.

Belki de bu makale, projelerinizde hemen kullanabileceğiniz hazır bir çözüm olacaktır. Şu anda bu yazıyı yazmamın nedeni de tam olarak bu. Hadi başlayalım.

Senaryomda, her rota değişikliğinde arka plan resmini değiştirmek istiyorum. Bu işlem, react-router kullanılarak rotaya özgü resimlerle yapılabilir. Ancak, resimler arasına yumuşak bir geçiş eklemek istiyorum. Çözüm CSS transition (geçiş) kullanmak, peki ama arka plan resimlerini programatik olarak animasyona girmeye nasıl zorlayabilirim?

İlk olarak, geçişin ne zaman gerçekleşeceğini react-transition-group paketine bildirmeliyim. Bu işlem, background.path değeri değiştiğinde gerçekleşir. Demoya ait arka plan verileri aşağıdadır:

{
  path: "/",
  src: "http://sorblog.com/wp-content/uploads/2018/10/javascript-autoclick.jpg"
},
{
  path: "/react",
  src: "https://cdn-images-1.medium.com/max/1200/1*jDIj2SKAE-Bp32owLoHDjw.png"
},
{
  path: "/transition",
  src: "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/09/1475177859css.jpg"
}

Önemli olan kısım, CSSTransition bileşeninin key prop’unun (özniteliğinin) değişmesidir. Key değiştiğinde, mevcut arka plan çıkış (exiting) durumuna geçer ve yeni gelen arka plan giriş (entering) durumuna dahil olur. Geçişi yavaş çekimde (toplam geçiş süresi 5000ms) görebilirsiniz:

Aşağıdaki uygulama, bu sürecin pratikte nasıl olması gerektiğini ifade etmektedir:

const Background = () => {
  const location = useLocation();                                                
  const background = backgrounds.find(bg => bg.path === location.pathname);                                                   return (
    <div>
      <TransitionGroup>
         <CSSTransition
           classNames="slide"                                    
           timeout={{ enter: 1000, exit: 1000 }}                                 
           key={background.path}
         >
           <img                                   
             className="background"                                   
             src={background.src}                                   
             alt={background.path.slice(1)}                                  
           />
         </CSSTransition>                              
       </TransitionGroup>
    </div>
  );
};

Son kısım, istediğimiz geçişi karşılamak için uygun CSS kurallarını yazmaktır. Kurallar içinde “slide” ifadesini barındırmalı ve geçiş süreleri CSSTransition bileşeninin timeout prop’u ile uyumlu olmalıdır.

/* ANIMATIONS */
.slide-enter {
  transform: translateX(100%);
}.slide-enter-active {
  transform: translateX(0%);
  transition: transform 1000ms ease-in-out;
}.slide-exit {
  transform: translateX(0%);
}.slide-exit-active {
  transform: translateX(-100%);
  transition: transform 1000ms ease-in-out;
}

Yönlendirme (routing) ve navigasyon içeren demo görünümü aşağıdadır. Her rotanın farklı bir arka planı vardır ve rotayı değiştirmek arka plan geçişine neden olur:

Not: Nedenini bilmiyorum ama sandbox içinde geçişler istendiği gibi görünmüyor, bu yüzden bu linkten kontrol edebilirsiniz. 

Yazar: Özgün Bal

Tags