Permet d'animer des éléments HTML

DOMAnimation.js

class DOMAnimations {
  /**
     * Masque un élément avec un effet de repli
     * @param {HTMLElement} element
     * @param {Number} duration
     * @returns {Promise<boolean>}
     */
  static slideUp (element, duration = 500) {
    return new Promise(function (resolve, reject) {
      element.style.height = element.offsetHeight + 'px'
      element.style.transitionProperty = `height, margin, padding`
      element.style.transitionDuration = duration + 'ms'
      element.offsetHeight // eslint-disable-line no-unused-expressions
      element.style.overflow = 'hidden'
      element.style.height = 0
      element.style.paddingTop = 0
      element.style.paddingBottom = 0
      element.style.marginTop = 0
      element.style.marginBottom = 0
      window.setTimeout(function () {
        element.style.display = 'none'
        element.style.removeProperty('height')
        element.style.removeProperty('padding-top')
        element.style.removeProperty('padding-bottom')
        element.style.removeProperty('margin-top')
        element.style.removeProperty('margin-bottom')
        element.style.removeProperty('overflow')
        element.style.removeProperty('transition-duration')
        element.style.removeProperty('transition-property')
        resolve(false)
      }, duration)
    })
  }

  /**
     * Affiche un élément avec un effet de dépliement
     * @param {HTMLElement} element
     * @param {Number} duration
     * @returns {Promise<boolean>}
     */
  static slideDown (element, duration = 500) {
    return new Promise(function (resolve, reject) {
      element.style.removeProperty('display')
      let display = window.getComputedStyle(element).display
      if (display === 'none') display = 'block'
      element.style.display = display
      let height = element.offsetHeight
      element.style.overflow = 'hidden'
      element.style.height = 0
      element.style.paddingTop = 0
      element.style.paddingBottom = 0
      element.style.marginTop = 0
      element.style.marginBottom = 0
      element.offsetHeight // eslint-disable-line no-unused-expressions
      element.style.transitionProperty = `height, margin, padding`
      element.style.transitionDuration = duration + 'ms'
      element.style.height = height + 'px'
      element.style.removeProperty('padding-top')
      element.style.removeProperty('padding-bottom')
      element.style.removeProperty('margin-top')
      element.style.removeProperty('margin-bottom')
      window.setTimeout(function () {
        element.style.removeProperty('height')
        element.style.removeProperty('overflow')
        element.style.removeProperty('transition-duration')
        element.style.removeProperty('transition-property')
      }, duration)
    })
  }

  /**
     * Affiche ou Masque un élément avec un effet de repli
     * @param {HTMLElement} element
     * @param {Number} duration
     * @returns {Promise<boolean>}
     */
  static slideToggle (element, duration = 500) {
    if (window.getComputedStyle(element).display === 'none') {
      return this.slideDown(element, duration)
    } else {
      return this.slideUp(element, duration)
    }
  }
}

Petite suggestion pour améliorer le code mais ça tient plus du perfectionnisme que de la réelle optiomisation, on gagne 2 lignes :
Lignes 44 à 46

let display = window.getComputedStyle(element).display
if (display === 'none') display = 'block'
element.style.display = display

Si on utilise l'opérateur ternaire, ça donne :

element.style.display = window.getComputedStyle(element).display === 'none' ? 'block' : window.getComputedStyle(element).display

Ça évite de définir une variable, mais la lisibilité en prend un coup... à voir ! :)

@leoboyerbx, je préfère aussi les opérateurs ternaires mais dans ce cas-ci, je ne suis pas tout à fait d'accord, je m'explique.

Dans ta proposition, tu appelles (parfois) 2 fois la même méthode window.getComputedStyle(element), ce qui est un inconvénient en terme de performance, tu ne sais pas ce que fait cette méthode, ni combien de temps dure t'elle ?

Donc, je préfère la solution de @Grafikart, qui est de stocker tout simplement le résultat de la méthode dans une variable locale et puis d'en faire ce que l'on veut, le résultat est déjà calculé, plus besoin de rappeler la méthode, une deuxième fois.

Après on pourrait très bien faire :

let display = window.getComputedStyle(element).display
element.style.display = display === 'none' ? 'block' : display

Je changerai la ligne 30 par un :

resolve(true)

ou, comme je ne vois pas trop l'intérêt du booléen dans ce cas de figure, par un :

resolve()

En oubliant pas de modifier la valeur de retour de la fonction dans les commentaire de documentation.
Et j'ajouterai la même ligne à la fonction slideDown, après la ligne 66. Sinon la promesse n'est jamais résolue.

Enfin, j'ajouterai une note pour les nouveaux devs : Dans le cas ou l’élément à animer est un ul, qui a margin-top et margin-bottom > 0, que son premier li a margin-top > 0 et/ou que son dernier li a margin-bottom > 0, un glitch va apparaitre quand on applique overflow:hidden au ul, car le margin-top du premier li et margin-bottom du dernier li disparaissent.
J'ai cherché un moment avant de comprendre d'où venait le glitch. Ceci-dit, c'est probablement un truc connu quand on utilise overflow:hidden.