animate.js

const animate = document.getElementById('animate');

const btn = document.getElementById('btn');

let enabled = false;

btn.onclick = function() {
  if (enabled) {
    enabled = false;
    transition(animate, {
      remove: ['opening', 'opened'],
      transitioning: 'closing',
      transitioned: 'closed'
    });
  } else {
    enabled = true;
    transition(animate, {
      remove: ['closing', 'closed'],
      transitioning: 'opening',
      transitioned: 'opened'
    });
  } 
}

const transition = (el, {
  remove = [],
  transitioning = '',
  transitioned = ''
}, duration = 1000) => {
  let timeout;
  clearTimeout(timeout);
  
  el.classList.remove(...remove, transitioning, transitioned);
  el.classList.add(transitioning);
  
  timeout = setTimeout(() => {
    el.classList.remove(transitioning);
    el.classList.add(transitioned);
    clearTimeout(timeout);
  }, duration);
}