J'ai récemment introduit un fondu avec animation CSS dans une application développée personnellement. Cela fonctionne pour le moment, mais lorsque je clique dessus en continu, la page s'affiche normalement, puis l'écran devient vide pendant un moment, puis il disparaît et s'affiche. On a l'impression que ça vacille, donc ça me semble un problème, alors je l'ai guéri à la hâte parce que je devais faire quelque chose. .. Je suis un peu coincé à essayer de résoudre ce problème, alors j'aimerais le partager ici.
【environnement】
** Tout d'abord, spécifiez display: none; '' pour l'élément scintillant. ** **
Je l'ai appliqué à l'ensemble de l'application, donc je l'ai spécifié dans l'élément body.
custom.css
body {
display: none;
}
Puis spécifiez dans jQuery comme suit. (Comme il n'était pas nécessaire de diviser le fichier en plusieurs lignes, je l'ai écrit solidement avec haml.)
Je l'ai écrit dans application.haml.haml parce que je voulais qu'il s'applique à l'ensemble de l'application.
javascript:application.html.haml
:javascript
$('body').fadeIn(700);
Si vous n'avez pas installé jQuery, veuillez installer jQuery. Si vous recherchez une méthode détaillée, de nombreux articles apparaîtront, je vais donc l'omettre ici.
$('élément').fadeIn('temps');でフェードインさせたいようそと、temps数を指定できます。
Au fait, j'ai fait `` display: none; '' parce que fadeIn () ne fonctionne que pour les éléments HTML cachés.
De cette façon, le scintillement a disparu.
## Si ça ne guérit toujours pas
Si vous cliquez une fois sur la page et qu'elle scintille à nouveau, il est possible que les turbolinks de Rails fassent quelque chose de mal.
Il semble scintiller parce que turbolinks charge le cache avant de charger le code jQuery, puis le jQuery est chargé. ([Veuillez consulter ici pour plus de détails](https://stackoverrun.com/ja/q/10980244))
Dans ce cas, écrivez ce qui suit dans la balise head pour désactiver les turbolinks.
#### **`haml:application.html.haml`**
%meta{:content => "no-cache", :name => "turbolinks-cache-control"}
## point important
Dans ce cas, la page ne sera pas affichée si JavaScript est désactivé, il serait donc encore mieux si vous pouviez ajouter une classe d'animation CSS uniquement lorsque JavaScript est activé!
Aussi, j'ajouterai ceci quand j'aurai le temps!
## Merci d'avoir lu jusqu'au bout!
De cette façon, nous sortons ce que nous avons appris chaque jour! Je vous serais reconnaissant de bien vouloir commenter vos suggestions et impressions!