はじめに
Railsアプリを開発していてflashメッセージをフェードアウトさせたく、javascriptを用いて実装したので書く。
こういったやつ↓↓(Bootstrapのalertを適用させています)
これをフェードアウトさせる
環境
Ruby: 2.5.1
Rails: 5.2.4.2
実装
実装イメージとしては徐々に透明度を高くしていき、最終的に非表示にします。
要素のstyle属性
①opacityの値を減少させていく
②opacityが0になったらdisplay: none; にする
viewファイル
erbはこのようになっている
_flash_messages.html.erb
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
jsファイル
flash_message.js
// turbolinks:loadでページ読み込み時に実行
document.addEventListener('turbolinks:load', () => {
// flashメッセージ要素を取得
const flashMessage = document.querySelector('.alert');
// フェードアウトさせる(徐々に透過し,非表示にする)関数を定義
const fadeOutFlashMessage = () => {
// setIntervalを特定するために返り値を変数timer_idに格納
const timer_id = setInterval(() => {
// flashメッセージのstyle属性 opacityを取得
const opacity = flashMessage.style.opacity;
if (opacity > 0) {
// opacityの値が0より大きければ0.02ずつ値を減少させる
flashMessage.style.opacity = opacity - 0.02;
} else {
// opacityの値が0になったら非表示に
flashMessage.style.display = 'none';
// setIntervalをストップさせる
clearInterval(timer_id);
};
}, 50); // 今回は0.05秒ごとにsetIntervalを実行
}
// flashメッセージがある場合のみ実行
if (flashMessage !== null) {
// style属性opacityをセット
flashMessage.style.opacity = 1;
// 今回は表示から3秒後に上記で定義したフェードアウトさせる関数を実行
setTimeout(fadeOutFlashMessage, 3000);
};
});
参考文献
下記記事を参考にさせていただきました。
ありがとうございました。
・turbolinksチートシート
・【JavaScript】Railsのflashをフェードアウトして消す方法
最後に
読んでいただきありがとうございます。
間違いや、より効率的な記述方法等あればご指摘いただけると非常に嬉しいです。