Ich habe kürzlich ein Fade-In mit CSS-Animation in einer persönlich entwickelten App eingeführt. Es funktioniert vorerst, aber wenn ich kontinuierlich darauf klicke, wird die Seite normal angezeigt und dann wird der Bildschirm für einen Moment leer und dann wird es eingeblendet und angezeigt. Es fühlt sich an, als würde es flackern, also fühlt es sich wie ein Problem an, also dachte ich, ich müsste etwas dagegen tun und es heilen. .. Ich bin ein wenig festgefahren, um das zu lösen, deshalb möchte ich es hier teilen.
【Umgebung】
** Geben Sie zunächst `display: none;` für das flackernde Element an. ** ** **
Ich habe es auf die gesamte Anwendung angewendet und es im body-Element angegeben.
custom.css
body {
display: none;
}
Geben Sie dann in jQuery Folgendes an. (Da es nicht notwendig war, die Datei in mehrere Zeilen zu unterteilen, habe ich sie solide mit haml geschrieben.) Ich habe es in `` `application.haml.haml``` geschrieben, weil ich wollte, dass es für die gesamte Anwendung gilt.
javascript:application.html.haml
:javascript
$('body').fadeIn(700);
Wenn Sie jQuery nicht installiert haben, installieren Sie bitte jQuery. Wenn Sie nach einer detaillierten Methode suchen, werden viele Artikel angezeigt, daher werde ich sie hier weglassen.
$('Element').fadeIn('Zeit');でフェードインさせたいようそと、Zeit数を指定できます。
Übrigens habe ich `` `display: none;` `` gemacht, weil fadeIn () nur für versteckte HTML-Elemente funktioniert.
Auf diese Weise verschwand das Flimmern.
## Wenn es immer noch nicht heilt
Wenn Sie einmal auf die Seite klicken und sie erneut flackert, ist es möglich, dass Rails-Turbolinks etwas falsch machen.
Es scheint zu flackern, weil Turbolinks den Cache laden, bevor der jQuery-Code geladen wird und dann die jQuery geladen wird. ([Einzelheiten finden Sie hier](https://stackoverrun.com/ja/q/10980244))
Schreiben Sie in diesem Fall Folgendes in das Head-Tag, um Turbolinks zu deaktivieren.
#### **`haml:application.html.haml`**
%meta{:content => "no-cache", :name => "turbolinks-cache-control"}
## wichtiger Punkt
In diesem Fall wird die Seite nicht angezeigt, wenn JavaScript deaktiviert ist. Es wäre also noch besser, wenn wir CSS-Animationsklassen nur hinzufügen könnten, wenn JavaScript aktiviert ist!
Außerdem werde ich dies hinzufügen, wenn ich Zeit habe!
## Vielen Dank für das Lesen bis zum Ende!
Auf diese Weise geben wir das aus, was wir jeden Tag gelernt haben! Ich wäre Ihnen dankbar, wenn Sie Ihre Vorschläge und Eindrücke kommentieren könnten!
Recommended Posts