An introduction to React Transition Group – Simple page transition with react transition group for next.js

 react-transition-group is a simple lightweight library to add CSS animations to react projects. With this plugin, we will get page entering, enter complete, leave, and leave complete states. With these states, we can add any CSS animations and transitions easily. Import the switch SwitchTransition, CSSTransition components to Layout.js

import { useRef } from 'react';
import { useRouter } from 'next/router';
import { CSSTransition, SwitchTransition } from 'react-transition-group';

export default function CommonLayout({ children, props }) {
 const router = useRouter();
 const pagesMain = useRef(null);
 return(
   <SwitchTransition mode="out-in">
     <CSSTransition key={router.pathname} timeout={300} appear in={true} unmountOnExit nodeRef={pagesMain} classNames="page">
       <main ref={pagesMain}>
        {children} 
      </main>
    </CSSTransition>
  </SwitchTransition>
)}

.page-enter {
  opacity: 0;
  transform: scale(1.1);
}
.page-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.page-exit {
  opacity: 1;
  transform: scale(1);
}

.page-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

In this example the CSSTransition component will generate css classes for each transition state with prefix specified in classes props. The enter class (page-enter in the example) is used to style before start enter transition state. The enter-active class is for enter transition active state. The exit class is for before exit transition state and exit-active for exit transition active state. The SwitchTransition component will help switch pages after previous page leave animation completed (when mode="out-in").

We can see some other props in CSSTransition component. The timeout prop is the duration of the animation. The in prop indicate the element is active, which means when in changes from false to true the enter and enter-active classes are added and when it changed to true to false exit and exit-active classes are added. When the appear prop is true the animation will occur on first load. The unmountOnExit prop removes the inactive html from DOM. The nodeRef prop is the reference of the animating element. The key is the unique key of the active element. It is only required in SwitchTransition.

There are 2 other components available in react-transition-group

Transition – Same as CSSTransition only difference is that it gives a function with the state as argument. This is usefull with taiwindcss

ex:

const transitionClass = {
  entering: `opacity-1`,
  entered: `opacity-1`,
  exiting: 'opacity-0',
  exited: 'opacity-0'
};
<Transition key={router.pathname} timeout={300} appear in={true} mountOnEnter unmountOnExit nodeRef={pagesMain}>
  {state=>( <main className={transitionClass[state]}>{children}</main> )}
<Transition>