Lorsqu'une erreur survient dans Rails, je pense que c'est une méthode courante pour utiliser flash et afficher un message en haut de la page. Fondamentalement, le flash reste en haut à moins que vous ne rechargiez la page ou que vous n'alliez sur une autre page. Programmez cet affichage pour qu'il disparaisse sans changer de page.
Réglez le flash de base et placez-le dans la vue. Spécifiez l'attribut de classe, réglez le minuteur avec javascript, ajoutez une nouvelle classe et chargez css.
Au fait, jQuery a une méthode appelée fadeout (), que vous pouvez également utiliser (c'est facile à écrire). Cependant, après avoir disparu, la page monte soudainement vers le haut de la portée du flash affiché, j'ai donc pensé que ce serait un problème du point de vue de l'utilisateur. (Exemple: au moment où vous essayez de cliquer, ou la page bouge soudainement pendant la lecture d'un article, etc.) J'ai essayé de l'effacer d'une manière différente, y compris le sens d'étudier.
On suppose que les paramètres Flash, les paramètres javascript, etc. ont été définis sur le contrôleur.
~html.erb
<body>
<% if flash.notice %>
<p class="fadeoutTarget"><%= flash.notice %></p>
<% end %>
</body>
Définissez "fadeoutTarget" dans l'attribut class sur la balise p qui entoure flash.notice. Bien sûr, le nom peut être défini de manière arbitraire.
app/assets/javascripts/script.js
$(document).on(turbolinks:load, function() {
/*Sélectionnez un élément avec une classe appelée fadeoutTarget*/
const fadeoutElement = document.querySelector(".fadeoutTarget");
/*Ajouter une classe appelée fade out après un certain temps*/
function flashFadeout() {
setTimeout(function() {
fadeoutElement.classList.add("fadeout");
}, 5000);
}
/*Exécuter s'il existe un document avec un élément appelé fadeoutTarget*/
if (fadeoutElement != null) {
window.onload = flashFadeout();
}
Sélectionnez un élément avec un attribut de classe arbitraire avec .querySelector (). Dans ce cas, il est configuré pour récupérer l'élément flash dans la balise p. Ce sera un programme qui exécutera la fonction après un certain laps de temps avec setTimeout (). La partie numérique peut être définie de manière arbitraire. Cela fonctionne même s'il n'y a pas d'instruction last if, mais en termes de traitement, lorsqu'il n'y a pas de fadeoutElement (quand il n'y a pas de flash: notice), l'erreur "There is no fadeoutElement!" S'affiche, donc if instruction comme celle-ci Il est entouré de.
app/assets/stylesheets/application.scss
p.fadeoutTarget.fadeout {
opacity: 0;
transition: 1s;
}
Lorsque le javascript de la section précédente fonctionne, css est appliqué et estompé. À proprement parler, il devient transparent sur place, de sorte que la page ne bouge pas brusquement après avoir disparu.
Il existe de nombreuses façons de faire disparaître un élément, je veux donc pouvoir le gérer comme j'en ai besoin à chaque fois. Dans ce cas, il n'y a pas de défilement soudain de la page, mais cela peut sembler un peu peu attrayant car il y a une marge de flash en haut.
Personnellement, je pense que cela s'inscrit de manière convaincante. C'était aussi une bonne occasion d'étudier le javascript.