slidey.js

import anime from 'animejs';

export const slideDown = (node, displayMode = 'block', easing = 'easeOutExpo', duration = 600) => {
  console.log(node);
  const nodeToCopy = node.cloneNode(true);
  nodeToCopy.style.position = 'absolute';
  nodeToCopy.style.display = 'block';
  nodeToCopy.style.visibility = 'hidden';
  nodeToCopy.style.height = 'auto';
  const copiedNode = document.body.appendChild(nodeToCopy);
  const heightToSlideTo = copiedNode.getBoundingClientRect().height;
  node.style.height = 0;
  node.style.display = displayMode;
  anime({
    targets: node,
    height: [0, heightToSlideTo],
    duration,
    easing
  });
  copiedNode.remove();
};

export const slideUp = (node, easing = 'easeOutExpo', duration = 600) => {
  if (node.getBoundingClientRect().height === 0) {
    return;
  }
  anime({
    targets: node,
    height: 0,
    duration,
    easing,
    complete() {
      node.style.display = 'none';
    }
  });
};