Nate's flash setup

application_controller.rb

add_flash_types :primary, :secondary, :success, :danger, :warning, :info, :light, :dark

flash.html.erb

<div id="flash" class="container">
  <% flash.each do |type, message| %>
    <%= tag.div message, class: "alert alert-#{type} shadow-lg",
      data: { controller: "flash", action: "animationend->flash#next click->flash#hide" } %>
  <% end %>
</div>

flash_controller.js

import ApplicationController from './application_controller'

document.addEventListener('turbolinks:before-cache', () =>
  document.getElementById('flash').remove()
)

export default class extends ApplicationController {
  connect () {
    this.duration = 3500
    this.showClassName = 'animate__headShake'
    this.hideClassName = 'animate__zoomOut'
    this.show()
  }

  next () {
    if (this.hidden) return this.element.remove()
    this.hideSlow()
  }

  show () {
    this.element.classList.add(
      'animate__animated',
      'animate__faster',
      this.showClassName
    )
  }

  hideSlow () {
    this.element.classList.remove(this.showClassName)
    setTimeout(this.hide.bind(this), this.duration)
  }

  hide () {
    this.element.classList.remove(this.showClassName)
    this.element.classList.add(this.hideClassName)
  }

  get hidden () {
    return this.element.classList.contains(this.hideClassName)
  }
}