[RUBY] [Rails] Ausblenden von Flash-Nachrichten mit Javascript ohne Verwendung von jquery

Einführung

Ich entwickle eine Rails-App und möchte Flash-Nachrichten ausblenden. Deshalb habe ich sie mit Javascript implementiert, also schreibe ich sie.

Diese Jungs ↓ ↓ (Bootstrap-Alarm wird angewendet)

Ausblenden

Umgebung

Ruby: 2.5.1 Rails: 5.2.4.2

Implementierung

Erhöhen Sie als Implementierungsimage schrittweise die Transparenz und verbergen Sie sie schließlich.

Elementstilattribut ① Verringern Sie den Wert für die Deckkraft ② Wenn die Deckkraft 0 wird, stellen Sie die Anzeige ein: keine;

Datei ansehen

erb sieht so aus

_flash_messages.html.erb

<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>

js Datei

flash_message.js

// turbolinks:Wird ausgeführt, wenn eine Seite mit Laden geladen wird
document.addEventListener('turbolinks:load', () => {

  //Flash-Nachrichtenelement abrufen
  const flashMessage = document.querySelector('.alert');

  //Ausblenden (allmählich transparent),Eine Funktion definieren (ausblenden)
  const fadeOutFlashMessage = () => {
    //Der Zeitgeber für die Rückgabewertvariable zur Identifizierung von setInterval_In ID speichern
    const timer_id = setInterval(() => {
      //Ruft die Deckkraft des Stilattributs der Flash-Nachricht ab
      const opacity = flashMessage.style.opacity;

      if (opacity > 0) {
      //0, wenn der Deckkraftwert größer als 0 ist.Verringern Sie den Wert um 02
        flashMessage.style.opacity = opacity - 0.02;
      } else {
        //Ausblenden, wenn der Deckkraftwert 0 erreicht
        flashMessage.style.display = 'none';
        //Stoppen Sie setInterval
        clearInterval(timer_id);
      };
    }, 50); //Diesmal 0.Führen Sie setInterval alle 05 Sekunden aus
  }

  //Nur ausführen, wenn eine Flash-Meldung vorliegt
  if (flashMessage !== null) {
    //Legen Sie die Deckkraft der Stilattribute fest
    flashMessage.style.opacity = 1;
    //Führen Sie dieses Mal die Funktion aus, die wie oben definiert 3 Sekunden nach der Anzeige ausgeblendet wird.
    setTimeout(fadeOutFlashMessage, 3000);
  };
});

Verweise

Ich habe auf den folgenden Artikel verwiesen. Vielen Dank.

・ Turbolinks-Spickzettel ・ [JavaScript] Ausblenden und Löschen von Rails Flash

Schließlich

Danke fürs Lesen. Ich würde mich sehr freuen, wenn Sie auf Fehler oder effizientere Beschreibungsmethoden hinweisen könnten.