stim-animate.js

// app/javascript/lib/utils.js
export default function animateCSS({ element, classes = [], callback }) {
  const finalClasses =  ['animated', ...classes]
  element.classList.add(...finalClasses)

  function handleAnimationEnd() {
    element.classList.remove(...finalClasses)
    element.removeEventListener('animationend', handleAnimationEnd)

    if (typeof callback === 'function') callback()
  }

  element.addEventListener('animationend', handleAnimationEnd)
}

   
// Example -> Calling from animateCSS() from a Stimulus Controller  

   animateCSS({ element: this.menuTarget, classes: ['fadeIn', 'speed-200'], callback: () => {
      if (this.invisibleValue) {
       this.hide()
      }
    }})