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】

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!




Recommended Posts

How to cure screen flickering when fading pages with CSS animations
How to automatically generate ER diagram when migrating with Rails6
How to set environment variables when using Payjp with Rails
How to specify db when creating an app with rails
How to cure the time dilation when launching Japaneseized Kibana
How to number (number) with html.erb
How to update with activerecord-import
How to write when installing Amazon Corretto 8 on CentOS 8 with Ansible.
[Rails 5] How to display the password change screen when using devise
How to scroll horizontally with ScrollView
How to get started with slim
How to enclose any character with "~"
[Rails] How to add new pages
How to use mssql-tools with alpine
How to make a splash screen
How to get along with Rails
How to start Camunda with Docker
How to decorate the radio button of rails6 form_with (helper) with CSS
How to find the total number of pages when paging in Java
[Rails] How to apply the CSS used in the main app with Administrate