react-transition-group

CSSTransition 의 특징? >>> CSSTransition : 1개 컴포넌트만 변경  아님>> 여러개 가능 

Transition 여러개 변경 가능

<CSSTransition key={index} timeout={500} classNames='fade'> 
<div> 하이하이 </div>
</CSSTransition>

// 글로벌로 지정해줘서 import xx.scss 해주었음
`css 
.fade-enter {
    opacity: 0 !important;
  }
  .fade-enter-active {
    opacity: 1 !important;
     transition: all 0.8s ease !important;
  }
  .fade-exit,
  .fade-enter-done
   {
    opacity: 1;
  }
  .fade-exit-active {
    opacity:0;
    transition: all 0.5s ease !important;
  }

{showingList.map((item: any, index: number) => (
        <Transition key={index} in timeout={500} appear>
          {status => (
            <BubbleHistoryItem
              className={`${position(item)} item-${status}`}
              key={`history_${item.id}`}
              style={{ opacity: setOpacity(index) }}>
              <Bubble className='Bubble' value={item.word} tailPosition={position(item)} />
            </BubbleHistoryItem>
          )}

        </Transition>
      ))}

// 글로벌로 지정해줘서 import xx.scss 해주었음
`css
.item-entering {
    opacity: 0 !important;
  }
  .item-entered{
    opacity: 1 ;
    transition: opacity 500ms ease-in;
  }
  .item-exiting {
    opacity: 1 !important;
  }
  .item-exited {
    opacity: 0 !important;
    transition: opacity 500ms ease-in;
  }

{showingList.map((item: any, index: number) => (
          <CSSTransition key={index} in timeout={500} classNames='item' appear>
            {/* animation 설정  _global.css */}
            <BubbleHistoryItem
              className={`${position(item)}`}
              key={`history_${uuidv4()}`}
              style={{ opacity: setOpacity(index) }}>
              <Bubble className='Bubble' value={item.word} tailPosition={position(item)} />
            </BubbleHistoryItem>
          </CSSTransition>
        ))}

//global.scss

.item-enter-active {
    opacity: 0 !important;
  }
  .item-enter-done {
    opacity: 1 ;
    transition: opacity 500ms ease-in;
  }
  .item-exit {
    opacity: 1 !important;
  }
  // .item-exit-active {
  //   opacity: 0 !important;
  //   transition: opacity 500ms ease-in;
  // }
  // .item-exit-done {
  //   opacity: 0 !important;
  //   transition: opacity 500ms ease-in;
  // }

 

라우터에 적용 할경우 예시

<div className='app'>
      <TransitionGroup className='transitions-group'>
        <CSSTransition exact key={location.pathname} timeout={500} classNames='fade'>
          <Routes location={location}>
            <Route path='/main' element={<Main initStatus={initStatus} />} />
            <Route path='/gameplay' element={<GamePlay />} />
            <Route path='/gameresult' element={<GameResult />} />
            <Route path='*' element={<Navigate replace to='/main' />} />
          </Routes>
        </CSSTransition>
      </TransitionGroup>
    </div>

TransitionGroup : 그룹화 시켜서 어떤 css 를 한꺼번에 줄때 사용