SwitchTransition

A transition component inspired by the vue transition modes. You can use it when you want to control the render between state transitions. Based on the selected mode and the child's key which is the Transition or CSSTransition component, the SwitchTransition makes a consistent transition between them.

If the out-in mode is selected, the SwitchTransition waits until the old child leaves and then inserts a new child. If the in-out mode is selected, the SwitchTransition inserts a new child first, waits for the new child to enter and then removes the old child

function App() {
 const [state, setState] = useState(false);
 return (
   <SwitchTransition>
     <FadeTransition key={state ? "Goodbye, world!" : "Hello, world!"}
       addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
       classNames='fade' >
       <button onClick={() => setState(state => !state)}>
         {state ? "Goodbye, world!" : "Hello, world!"}
       </button>
     </FadeTransition>
   </SwitchTransition>
 )
}

Props

mode

Transition modes. out-in: Current element transitions out first, then when complete, the new element transitions in. in-out: New element transitions in first, then when complete, the current element transitions out.

type: 'out-in'|'in-out'
default: 'out-in'

children

Any Transition or CSSTransition component

type: element