Auto dismiss flash messages
![](https://secure.gravatar.com/avatar/46329400e755e44845206c5cd6987cf9.png?default=mp&rating=pg&size=48)
![](https://secure.gravatar.com/avatar/ce795239ba5dd2384fc2f88ffaff5451.png?default=mp&rating=pg&size=48)
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.
Notifications
You’re not receiving notifications from this thread.