Rails6でjqueryアニメーションライブラリanimsitionの使用 | 躓いたことなど．．．

1. rails6でanimsitionを使う

ビューにアニメーションを付けようと思い、試しにanimsitionというjqueryライブラリを使った．いくつか、躓いて勉強になったことをまとめる．

2. まずはダウンロード

ライブラリを下記のサイトからダウンロード（ZIP形式）
https://github.com/blivesta/animsition

3. webpacker経由だと動かない．．．

★解凍後、以下の2ファイルををapp/javascript/srcにコピー．
①dist/js/animsition.js
②dist/js/animsition.css
★app/javascript/packs/application.jsに追記

application.js

import "../src/animsition.js";
import "../src/animsition.css";

★app/views/layouts/application.html.erbのheadタグ内に追記
➡jqueryを読み込む
➡application.jsを読み込む
これでビューでanimsition.jsとanimsition.cssを読み込めたはず．．．
readmeでanimsition.jsより先にjqueryを読み込むと書いてあったので、順番もいいはず．．．

application.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

★ビューで動作確認のため、以下追記

show.html.erb

<div class="animsition">
  <a href="https://www.google.com/" class="animsition-link">animsition link 1</a> 
  <a href="https://www.google.com/" class="animsition-link">animsition link 2</a>
</div>
<script>
$(document).ready(function() {
  $(".animsition").animsition({
    inClass: 'rotate-in',
    outClass: 'rotate-out',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.animsition-link',
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
    loading: true,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});
</script>

ページをリロードして確認．．．動かず．．．エラー出てる
animsition is not a functionみたいなよくあるエラー
animsition .jsファイルが読み込めてるか確認のため、jsファイルにalert文を仕込んだが、問題なく実行されていた.animsition .cssも一応確認したが、問題なし.

4. assets内にライブラリを配置して、読み込むと動いた！

webpacker経由で読み込むのはやめて、assets内からライブラリを読み込むようにしてみた.
★app/assets/の中にanimsition.jsとanimsition.cssをコピー
★application.html.erbに下記を追記
javascript_include_tag で個別に読み込んでみた.

application.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<%= javascript_include_tag 'animsition.js' %>

★app/config/initializers/assets.rbに下記を追記
これを書かないとjavascript_include_tag が動かないらしい．．．

assets.rb

Rails.application.config.assets.precompile += %w( animsition.js )

★ページをリロードして確認．．．動いた！

5. redirect_to以外の方法で遷移したページのアニメーションが動かない．．．

アニメーションが無事動いたが、問題が発覚.
redirect_toで遷移するページに記載したアニメーションは動作するが、redirect_toを使用しないで、遷移したページに記載したアニメーションは動作しないことがわかった.

6. data-turbolinkのせい！

どうやら、data-turbolinkの仕業でした．
data-turbolinkはheadタグを最初の1回しか読まずに、ページの表示を高速化するgemで、rails4からデフォルトで導入されている模様．．．
そして、data-turbolinkが働いて遷移したページではreadyイベントが発火しない事があるらしい．

★data-turbolinkをオフにする
遷移元のリンクタグにdata属性を追加

<%= link_to "マイページ", current_user, data: {"turbolinks" => false} %>

この設定を付けて、ページ遷移すれば、遷移先のアニメーションは無事動作した.

参考にしたページ
★Rails 4のturbolinksについて最低でも知っておきたい事
https://kray.jp/blog/must-know-about-turbolinks/
★Rails 5.0でlink_toでturbolinkを無効にする法
https://qiita.com/hodosan/items/ee84482d18d6dccd9488