turbolinksのせいで遷移時ロードアニメーションが動かない

Question

実現したいこと

トップページのみローディングアニメーションを実装。ページ遷移でトップに戻ってくるたび動いてほしい

発生している問題・分からないこと

Androidのページ遷移時にアニメーションが動作しない。
$(window).on('load', function () {}　を　$(document).on('turbolinks:load', function () {}に変えるとそもそも動かなくなる。

エラーメッセージ

動かないのでなし……

該当のソースコード

		$(function () {
			function end_loader() {
				$('.loading-animation').addClass('active');
			}
			$(document).on('turbolinks:load', function () {
				setTimeout(function () { end_loader();}, 2000)
			});
		})

		.loading-animation {
			width: 100dvw;
			height: 100dvh;
			background: #007CFF url(/images/opening_sp.png) no-repeat 50% 50% / auto 100%;
			transition: all 1s;
			z-index: 150;
			opacity: 1;
			position: fixed;
			top: 0;
			left: 0;
		}
		.loading-animation.active {
			animation: zoomOut 2s;
		}

		@keyframes zoomOut {
			0% {
				background-size: auto 100%;
				opacity: 1;
				z-index: 150;
				display: block;
			}
			99.9%,
			to {
				background-size: auto 0%;
				opacity: 0;
				z-index: -100;
				display: none;
			}
		}

<div class="loading-animation"></div>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

$(document).on('turbolinks:load', function () {
console.log('Hello World')
});
そもそもこれが動かない

AddClassがまずいのか？と思ってfadeOut(800)とか、toggleClassにしてもだめ
AndroidのUSBデバッグで確認したところ、activeのClassが付与されない

補足

確認ブラウザはPC、AndroidどちらもChrome最新版
Androidのバージョンは16

Answer 1

すみません。自己解決しました。

(function ($) {
  function end_loader() {
    $('.loading-animation').addClass('active');
  }

  // 通常の読み込み時
  $(document).ready(function () {
    setTimeout(end_loader, 2000);
  });

  // Turbolinksでの遷移時
  $(document).on('turbolinks:load', function () {
    setTimeout(end_loader, 2000);
  });
})(jQuery);