React Suspense

React Suspense 소개 (feat. React v18)

React transition group

Animated Routes Demo - React Router V6

리액트-route transition animation (1)

TransitionGroup 사용.

<TransitionGroup className="transitions-wrapper">
        <CSSTransition key={location.pathname} classNames="2ade" timeout={250}>
						<Component />
				</CSSTransition>
</TransitionGroup>

tranistion.css 사용

.transitions-wrapper {
  background-color: red;
}

.fade-enter {
  opacity: 1;
  /* transform: translate(0, 25px); */
  /* z-index: 1; */
}
.fade-enter.fade-enter-active {
  opacity: 0;
  /* transform: translate(0, 0); */

  transition: opacity 250ms ease-out;
}
.fade-exit {
  opacity: 0;
  /* transform: translate(0, 0); */
}
.fade-exit.fade-exit-active {
  opacity: 1;
  /* transform: translate(0, 30px); */

  transition: opacity 250ms ease-out;
}

모달이 켜지고 뒤로가기 했을때 모달이 닫히게 하는 것 구현함.