検索流入時のフェードインアニメーションがおかしい

ご閲覧いただき、ありがとうございます。

JSでフェードインを実装しています。

ダイレクト（URLを入力してページへ飛ぶ）の場合は、問題なくフィードインのアニメーションが実行されるのですが、なぜかGoogleの検索からクリックして該当ページへアクセスした際のみ、アニメーションの挙動がおかしいです。

フェードインする時にゆらゆら揺れていたり、二回繰り返されてしまったります。

これはJSの問題でしょうか、それとも、何か別のところで問題が起きていると考えられるのでしょうか？

JavaScript
1 $(window).on("load", function() {
2  $(".handin")
3    .each(function() {
4      var targetElement = $(this).offset().top;
5      var scroll = $(window).scrollTop();
6      var windowHeight = $(window).height();
7      if (scroll > targetElement - windowHeight + 200) {
8        $(this).css("opacity", "1");
9        $(this).css("transform", "translateY(0)");
10        $(this).css("transition", "all 2s");
11      }
12    })
13    .delay(1000)
14    .queue(function() {
15      $(".delay-handin").css("opacity", "1");
16      $(".delay-handin").css("transform", "translateY(0)");
17      $(".delay-handin").css("transition", "all 2s");
18    });
19});

HTML
1<div class="handin">Hello World</div>
2<div class="delay-handin">example.com</div>

CSS
1.handin,
2.delay-handin {
3  opacity: 0;
4  transform: translateY(20px);
5  transition: all 1s;
6}

JavaScript
1$(document).ready(function() {
2・・・
3})

に書き換えてみたりもしたのですが、意味はなかったです。

moredeep

2019/05/31 09:05

情報が少なくてなんともです。そのページへ飛ぶだけのHTMLからアクセスしたらどうなるか？(ローカル(file://) and サーバ(http://)) Google以外の検索サイトでもそうなのか？ (可能なら)各処理間にconsole出力を入れたらどうなるのか？再現する別ページを作ることができるのか？