最近個人開発アプリにCSSアニメーションでフェードインを導入しました。とりあえず動くことにはうごくのですが、連続してクリックすると普通にページが表示されてから一瞬画面が真っ白になり、そこからフェードインされて表示される現象が発生しました。ちらつく感じなのでいかにも不具合という感じなので何とかしなけばと思いあわてて治しました。。
これを解決するのにすこし詰まってしまったので、ここで共有したいと思います。
【環境】
- 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
まずは解決策
まずちらついている要素にdisplay: none;を指定します。
私はアプリケーション全体に適用していたのでbody要素に指定しました。
body {
display: none;
}
その後jQueryで以下のように指定します。(数行でファイルを分けるまでもなかったのでhamlでベタ書きしてます。)
アプリケーション全体に適用させたかったのでapplication.haml.hamlに私は書きました。
:javascript
$('body').fadeIn(700);
jQueryを導入してない方は、jQueryを導入してください。詳しい方法はさがせば記事がたくさん出てくるので、ここでは割愛します。
$('要素').fadeIn('時間');でフェードインさせたいようそと、時間数を指定できます。
ちなみに、display: none;をしたのは、fadeIn()は非表示になっているHTML要素に対してのみ機能するためす。
このようにしたらちらつきがなくなりました。
それでも治らない場合
一度行ったページを再びクリックするとちらつく場合、Railsのturbolinksが悪さをしている可能性があります。
jQueryのコードを読み込む前にturbolinksによりキャッシュがロードされてからjQueryが読み込まれるため、ちらついてしまうようです。（詳細はこちらをご参考下さい）
その場合headタグ内に次のように記述してturbolinksを無効にします。
%meta{:content => "no-cache", :name => "turbolinks-cache-control"}
注意点
この場合、JavaScriptがオフだとページが表示されないので、JavaScriptがonの場合のみCSSアニメーションのクラスを付与するようにできるとなおよいと思います！
また、時間がある時にこちらの追記しようと思います！
最後まで読んでいただきありがとうございます！
このように、日々学習した内容をアウトプットしております！ご指摘や感想などコメントしていただけると嬉しいです！