実現したいこと

loading の切り替えがしたい（true,false)

前提

・windows使用
・ブラウザはクロム使用
・animsition 使用

発生している問題・エラーメッセージ

・loading:true,から、「loading:false」としてもローディング時にロードのエフェクトがかかってしまう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animsition.css">
  <title>jQuery</title>
</head>
<body>
  <div class="animsition">
    <h1>画面遷移</h1>
    <ul>
      <li>
        <a
          href="page1.html"
          class="animsition-link"
          data-animsition-out-class="fade-out-up-sm"
          data-animsition-out-duration="500"
          >
          Page1
        </a>
      </li>
    </ul>
  </div>

  <!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- animsition.js -->
<script src="./js/animsition.min.js"></script>
<script>
  $(function(){
    $(".animsition").animsition({
      inClass:'fade-out',
      linkElemnt: '.animsition-link',
     loading:false,
    })
  })
</script>
</body>
</html>

試したこと

・ブラウザをエッジに変更したが同様の傾向あります。
・「inClass:'fade-out',」や「loading:false,」をコメントアウトしても、変わりありませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2023/09/27 03:35 編集

当方でご提示のコードを試してみましたが、問題なくローディング表示が抑制されました。loading:true とするとローディング表示がされました。ただ、ご提示だけのコードですと、loading:true としてもローディング画像が表示されないため、当方にて以下の設定を追加しています。 loadingParentElement: 'body', //animsition wrapper element loadingClass: 'animsition-loading', loadingInner: '', // e.g '<img src="loading.svg" />' --- もしかすると、ロード時のフェイドインアニメーションのことを「ローディング表示」とご表現されているのであれば、おそらくそれは loading:false としても抑止できないだろうと思います。

sasahara

2023/09/27 10:09

pecmm様差は確認できませんでした。 Lhankor_Mhy様＞もしかすると、ロード時のフェイドインアニメーションのことを「ローディング表示」とご表現されているのであれば、おそらくそれは loading:false としても抑止できないだろうと思います。すみません、勉強不足なのですが、それかと思います。 loadingParentElement: 'body', //animsition wrapper element loadingClass: 'animsition-loading', loadingInner: '', // e.g '<img src="loading.svg" />' 以下のようにコード入れてみたのですが、なりませんでした。申し訳ありませんが、ヒントいただけないでしょうか。スクリプトタグ内に記載しだめでした。 ```<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/animsition.css"> <title>jQuery</title> </head> <body> <div class="animsition"> <h1>画面遷移</h1> <ul> <li> <a href="page1.html" class="animsition-link" data-animsition-out-class="fade-out-up-sm" data-animsition-out-duration="500"> Page1 </a> </li> <li> <a href="page2.html" class="animsition-link" data-animsition-out-class="fade-in-right" data-animsition-out-duration="500"> Page2 </a> </li> <li> <a href="page3.html" class="animsition-link" data-animsition-out-class="fade-in-down" data-animsition-out-duration="500"> Page3 </a> </li> </ul> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <script src="./js/animsition.min.js"></script> <script> $(function () { $(".animsition").animsition({ inClass: 'fade-out', // ロードのエフェクト linkElemnt: '.animsition-link', //アニメーションを使うエレメント。ここでは<a>タグ loadingParentElement: 'body', //animsition wrapper element loadingClass: 'animsition-loading', loadingInner: '<img src="./img/82542_sample.png" />', // e.g '<img src="loading.svg" />' loading: false, //ローディングの有効/無効※f5キーを押したときの動作。 }) // $(".animsition").animsition({ // inClass:'fade-in', // linkElemnt: '.animsition-link', // loading:false, // }) // $(".animsition").animsition({ // inClass:'fade-in', // linkElemnt: '.animsition-link', // loading:true, // }) }) </script> </body> </html> 画像はimgフォルダ作り、適当な画像を入れております。

Lhankor_Mhy

2023/09/28 00:30

いえ、追加したコードはテストとしてローディング表示をさせるためのものであって、これを入れたからフェードインエフェクトがなくなるわけではないです。

行動規範の内容に同意します

回答1件

ベストアンサー

ローディング時にロードのエフェクトがかかってしまう

具体的には、どのようなエフェクトが表示されますか？

また、以下の2つで試したら、ローディング表示の差は確認できますか？

js
1    $(".animsition").animsition({
2      inClass:'fade-in',
3      linkElemnt: '.animsition-link',
4      loading:false,
5    })

js
1    $(".animsition").animsition({
2      inClass:'fade-in',
3      linkElemnt: '.animsition-link',
4      loading:true,
5    })

コメントにあわせて回答追記

フェードインエフェクトのことを、ローディングと表現

薄々そうかなーと思いつつ質問していました…ｗ

js:animsition.jsの20行目辺り
1        inClass               :   'fade-in',
2        outClass              :   'fade-out',
3        inDuration            :    1500,
4        outDuration           :    800,

ちらっと animsition.js 見ただけですが、上記のようなデフォルト値で動いているようです。

もしもoutアニメーションだけ使用してinは不要ということなら、inClassに「動作なし」を示す値を指定するか、inDurationを極端に短くするかなどでの対応になるでしょうか？
ただちょっと自信がないのですが、動作なしのようなinClassは定義されてなさそうですし、inDuration=0にしても一瞬ちらつくような挙動になりそうで
基本的にin＆out表示時はいずれもアニメーションするのが自然、といった思想のライブラリな気がします。

どうしても嫌なら、宣言的なアニメーション登録方式ではなく
$('.foo').animsition('out', $elem, url) のように必要な箇所全てで手動でメソッドを呼ぶ方式を採るしかないのかもしれません。

投稿2023/09/26 11:31

編集2023/09/28 05:08

pecmm

総合スコア760

sasahara

2023/09/28 03:54

pecmm様差は確認できませんでした。 ※他回答者様の欄に誤ってまとめてコメントしておりました。失礼致しました。 ※私、フェードインエフェクトのことを、ローディングと表現しておりました。重ねて申し訳ありません。

sasahara

2023/09/29 03:56

ご教授いただきありがとうございます。大変勉強になりました。ご回答いただいた2名の方、どちらもベストアンサーにさせていただきたいのですが、最初にいただいたpecmm様に押させていただきます。　正直こんな質問をしていいのか・・・と思いましたが、ご質問内容以上の知見拝借でき、勉強になりました。ありがとうございます。

行動規範の内容に同意します