export const heightTransitionClass =
  'transition-[height] duration-200 ease-linear overflow-hidden';

function forceHeightReflow(node: HTMLElement) {
  node.getBoundingClientRect();
}

export function onHeightTransitionEnter(el: Element) {
  const node = el as HTMLElement;
  node.style.height = '0px';
  forceHeightReflow(node);
  node.style.height = `${node.scrollHeight}px`;
}

export function onHeightTransitionAfterEnter(el: Element) {
  (el as HTMLElement).style.height = '';
}

export function onHeightTransitionBeforeLeave(el: Element) {
  const node = el as HTMLElement;
  node.style.height = `${node.scrollHeight}px`;
  forceHeightReflow(node);
}

export function onHeightTransitionLeave(el: Element) {
  (el as HTMLElement).style.height = '0px';
}
