AnimatedToggle

Unlike React Transition Group's CSSTransition, this component doesn't make any renders on children, unless the parent changes the children's reference. Also naturally if you send doUnmount attribute, it mounts and therefore renders the children.

import { AnimatedToggle } from './AnimatedToggle'

//...
return <AnimatedToggle show={someShowState}><SomeChildComp/></AnimatedToggle>

Customize the container div

.animated-toggle {
  width: fit-content;
  /*...*/
}

Customize the animation

const template1 = {
  secs: 1,
  showStyle: {opacity: '1', marginRight: '0',     rotate: '0deg'},
  hideStyle: {opacity: '0', marginRight: '30px',  rotate: '-15deg'},
  beforeShowExtraStyle:    {marginRight: '-30px', rotate: '15deg'},
}

//...
return <AnimatedToggle show={someShowState} {...template1}><SomeChildComp/></AnimatedToggle>