[RUBY] [Rails] Effacez les messages flash avec JavaScript sans utiliser jquery

introduction

Je développe une application Rails et je souhaite faire disparaître les messages flash, je l'ai donc implémentée en javascript, je vais donc l'écrire.

Ces gars ↓ ↓ (l'alerte Bootstrap est appliquée)

Fade this out

environnement

Ruby: 2.5.1 Rails: 5.2.4.2

la mise en oeuvre

En tant qu'image de mise en œuvre, augmentez progressivement la transparence et cachez-la enfin.

Attribut de style d'élément ① Diminuez la valeur de l'opacité ② Lorsque l'opacité devient 0, réglez l'affichage: aucun;

Voir la fiche

erb ressemble à ça

_flash_messages.html.erb

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

fichier js

flash_message.js

// turbolinks:Exécuter lors du chargement de la page avec chargement
document.addEventListener('turbolinks:load', () => {

  //obtenir un élément de message flash
  const flashMessage = document.querySelector('.alert');

  //Fondu (progressivement transparent,Définir une fonction (à masquer)
  const fadeOutFlashMessage = () => {
    //La variable de valeur de retour timer pour identifier setInterval_Stocker dans l'ID
    const timer_id = setInterval(() => {
      //Obtenez l'opacité de l'attribut de style du message flash
      const opacity = flashMessage.style.opacity;

      if (opacity > 0) {
      //0 si la valeur d'opacité est supérieure à 0.Diminuez la valeur de 02
        flashMessage.style.opacity = opacity - 0.02;
      } else {
        //Masquer lorsque la valeur d'opacité atteint 0
        flashMessage.style.display = 'none';
        //Arrêter setInterval
        clearInterval(timer_id);
      };
    }, 50); //Cette fois 0.Exécuter setInterval toutes les 05 secondes
  }

  //Exécuter uniquement s'il y a un message flash
  if (flashMessage !== null) {
    //Définir l'opacité des attributs de style
    flashMessage.style.opacity = 1;
    //Cette fois, exécutez la fonction qui disparaît comme défini plus de 3 secondes après l'affichage.
    setTimeout(fadeOutFlashMessage, 3000);
  };
});

Les références

J'ai fait référence à l'article suivant. Merci beaucoup.

・ Aide-mémoire Turbolinks ・ [JavaScript] Comment faire disparaître et effacer Rails flash

finalement

Merci pour la lecture. Je serais très heureux si vous pouviez signaler des erreurs ou des méthodes de description plus efficaces.