Wenn in Rails ein Fehler auftritt, ist es meiner Meinung nach eine gängige Methode, Flash zu verwenden und eine Meldung oben auf der Seite anzuzeigen. Grundsätzlich bleibt der Blitz oben, es sei denn, Sie laden die Seite neu oder wechseln zu einer anderen Seite. Programmieren Sie diese Anzeige so, dass sie ausgeblendet wird, ohne die Seiten zu wechseln.
Stellen Sie den Basisblitz ein und platzieren Sie ihn in der Ansicht. Geben Sie das Klassenattribut an, stellen Sie den Timer mit Javascript ein, fügen Sie eine neue Klasse hinzu und laden Sie CSS.
Übrigens hat jQuery eine Methode namens fadeout (), die Sie auch verwenden können (es ist einfach zu schreiben). Nach dem Ausblenden steigt die Seite jedoch plötzlich um den Bereich des angezeigten Blitzes nach oben, sodass ich dachte, dass dies aus Sicht des Benutzers ein Problem wäre. (Beispiel: In dem Moment, in dem Sie versuchen zu klicken oder die Seite beim Lesen eines Artikels usw. plötzlich verschoben wird.) Ich habe versucht, es auf eine andere Art und Weise auszublenden, einschließlich der Bedeutung des Studiums.
Es wird davon ausgegangen, dass Flash-Einstellungen, Javascript-Einstellungen usw. auf dem Controller vorgenommen wurden.
~html.erb
<body>
<% if flash.notice %>
<p class="fadeoutTarget"><%= flash.notice %></p>
<% end %>
</body>
Setzen Sie "fadeoutTarget" im Klassenattribut auf das p-Tag, das flash.notice umgibt. Natürlich kann der Name beliebig eingestellt werden.
app/assets/javascripts/script.js
$(document).on(turbolinks:load, function() {
/*Wählen Sie ein Element mit einer Klasse namens fadeoutTarget aus*/
const fadeoutElement = document.querySelector(".fadeoutTarget");
/*Fügen Sie nach einer bestimmten Zeit eine Klasse mit dem Namen Ausblenden hinzu*/
function flashFadeout() {
setTimeout(function() {
fadeoutElement.classList.add("fadeout");
}, 5000);
}
/*Ausführen, wenn ein Dokument mit einem Element namens fadeoutTarget vorhanden ist*/
if (fadeoutElement != null) {
window.onload = flashFadeout();
}
Wählen Sie mit .querySelector () ein Element mit einem beliebigen Klassenattribut aus. In diesem Fall wird festgelegt, dass das Flash-Element im p-Tag abgerufen wird. Es wird ein Programm sein, das die Funktion nach einer bestimmten Zeit mit setTimeout () ausführt. Der Nummernteil kann beliebig eingestellt werden. Es funktioniert auch dann, wenn es keine letzte if-Anweisung gibt, aber in Bezug auf die Verarbeitung, wenn kein fadeoutElement vorhanden ist (wenn kein flash: note vorhanden ist), wird der Fehler "Es gibt kein fadeoutElement!" Angezeigt. Wenn also eine solche Anweisung vorliegt Es ist umgeben von.
app/assets/stylesheets/application.scss
p.fadeoutTarget.fadeout {
opacity: 0;
transition: 1s;
}
Wenn das Javascript im vorherigen Abschnitt funktioniert, wird CSS angewendet und ausgeblendet. Genau genommen wird es an Ort und Stelle transparent, sodass sich die Seite nach dem Ausblenden nicht plötzlich bewegt.
Es gibt viele Möglichkeiten, ein Element auszublenden, daher möchte ich jedes Mal so damit umgehen können, wie ich es brauche. In diesem Fall wird die Seite nicht plötzlich gescrollt, sie sieht jedoch möglicherweise etwas unattraktiv aus, da oben ein Blitzrand angezeigt wird.
Persönlich denke ich, dass es auf überzeugende Weise passt. Es war auch eine gute Gelegenheit, Javascript zu studieren.