Fading out removal of element from DOM with Stimulus

Question

I currently have this simple stimulus JS controller which removes an element from DOM

import { Controller } from "stimulus"
export default class extends Controller {
  static targets = [ "element" ]
    close () {
        this.elementTarget.remove()
    }
}

Is there a way to fade out the element before removal?

Answer 1

I got something to kind of work with tailwind. I'll keep this till I find a more general solution

import { Controller } from "stimulus"
export default class extends Controller {
  static targets = [ "element" ]
    close () {
        this.element.classList.add('transform', 'opacity-0', 'transition', 'duration-1000');
        setTimeout(() => this.elementTarget.remove(), 1000)
    }
}