A simple expand/collapse animation using React

Expando.jsx

import React, {useRef, useLayoutEffect} from 'react';

const [DURMIN, DURMAX] = [0.1, .8];
const dur = f => Math.min(DURMAX, (1 - f) * DURMIN + f * DURMAX);

export function Expando({className, children, open}) {
  open = !!open;
  let node = useRef();
  let lastOpen = useRef(open);
  let duration = useRef(.5);

  let animPhase = ({prep, start, end}) => {
    if (end) {
      node.current.style.transition = '';
      node.current.style.maxHeight = open ? 'none' : 0;
    } else { // prep or start
      let contentHeight = node.current.firstChild.offsetHeight;
      duration.current = dur(contentHeight / 1000);
      node.current.style.maxHeight = ((!!prep == open) ? 0 : contentHeight) + 'px';
      node.current.style.transition = `max-height ${duration.current}s ease` +
          (open ? '' : `, visibility 0s linear ${duration.current}s`);
      node.current.scrollTop; // force reflow
    }
  };

  if (node.current && open != lastOpen.current) {
    animPhase({prep:true}); // just before render
  }

  lastOpen.current = open;

  useLayoutEffect(() => { // just after render
    animPhase({start:true});
    let end = ev => ev.target == node.current && animPhase({end:true});
    node.current.addEventListener('transitionend', end);
    return () => node.current.removeEventListener('transitionend', end);
  }, [open]);

  return <div className={className} ref={node}
      style={{
        overflow: 'hidden',
        visibility: open ? 'visible' : 'hidden'
       }}>
    <div style={{
      transform: open ? 'none' : 'translateY(-100%)',
      transition: `transform ${duration.current}s ease`,
    }}>{children}</div>
  </div>;
}

ExpandoDemo.jsx

import {Expando} from './Expando.jsx';

function App(props) {
  let [open, setOpen] = React.useState(false);
  return <React.Fragment>
    <button onClick={() => setOpen(!open)}>
      {open ? 'Close' : 'Open'}
    </button>
    <Expando open={open}>
      Child<br/>
      Content<br/>
      Here<br/>
    </Expando>
  </React.Fragment>;
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);