使用 Stimulus 淡出从 DOM 中删除元素

Question

我目前有这个简单的刺激 JS 控制器，它从 DOM 中删除一个元素

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

有没有办法在删除之前淡出元素？

Answer 1

我有一些与顺风有关的工作。我会保留这个直到找到更通用的解决方案

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)
    }
}