We've moved discussions to Discord

Join Discord

Auto dismiss flash messages

Seth Cox •
What is the best way to make the default Jumpstart flash messages auto-dismiss after a few seconds? Has anyone accomplished this with Tailwind's limited animation utilities? As you can tell, I don't know JS.
Eric Hiler •
+1 I'm interested in the same thing.
Chris Oliver •
You could add a simple Stimulus controller to hide them after X seconds.

import { Controller } from "stimulus"

export default class extends Controller {
  static values = {
    delay: Number,
    class: String,
  }

  connect(event) {
    setTimeout(() => {
      this.element.classList.add(...this.classValue.split(" "))
    }, this.delayValue || 5000)
  }
}

Then you'd just apply that to your HTML:

<div data-controller="autohide" data-autohide-class-value="opacity-0" data-autohide-delay-value="3000" class="mb-2 transition-all ease-in-out duration-500">Welcome to Jumpstart!</div>

This will fade the div to 0 opacity over 500ms after a delay of 3 seconds.
My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.