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に追記
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を読み込むと書いてあったので、順番もいいはず．．．
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
★ビューで動作確認のため、以下追記
<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 で個別に読み込んでみた.
<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 が動かないらしい．．．
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