How to cure screen flickering when fading pages with CSS animations

I recently introduced a fade-in with CSS animations in my personally developed app. It works for the time being, but when I click it continuously, the page is displayed normally, then the screen goes blank for a moment, and then it fades in and is displayed. It feels like it's flickering, so it feels like a problem, so I hurriedly healed it because I had to do something about it. .. I'm a little stuck trying to solve this, so I'd like to share it here.

【environment】

windows10 Pro
Rails: 6.0.3.2
ruby: 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-linux]
Docker for windows
MySQL 5.7
nginx:1.15.8

First solution

** First, specify `display: none;` for the flickering element. ** ** I applied it to the whole application, so I specified it in the body element.

`custom.css`



body {
  display: none;
}

After that, specify as follows in jQuery. (I didn't need to separate the file in a few lines, so I wrote it in haml.) I wrote it in application.haml.haml because I wanted it to apply to the whole application.

`javascript:application.html.haml`



:javascript
  $('body').fadeIn(700);

If you haven't installed jQuery, please install jQuery. If you look for a detailed method, many articles will appear, so I will omit it here.

`$('element').fadeIn('time');でフェードインさせたいようそと、time数を指定できます。`



 By the way, I did ``` display: none;` `` because fadeIn () works only for hidden HTML elements.

 This way the flicker disappeared.

## If it still doesn't heal
 If you click the page once and it flickers again, Rails turbolinks may be doing something wrong.
 It seems to flicker because jQuery is loaded after the cache is loaded by turbolinks before loading the jQuery code. ([Please refer to here for details](https://stackoverrun.com/ja/q/10980244))

 In that case, write the following in the head tag to disable turbolinks.


#### **`haml:application.html.haml`**

%meta{:content => "no-cache", :name => "turbolinks-cache-control"}


## important point
 In this case, the page will not be displayed if JavaScript is off, so it would be even better if you could add a CSS animation class only if JavaScript was on!
 Also, I will add this when I have time!

## Thank you for reading to the end!
 In this way, we are outputting what we have learned every day! I would be grateful if you could comment on your suggestions and impressions!