初回のローディング画像をフェードアウトさせたい

質問

jsについて質問です。

①初回のみローディング画像（gif）を表示して、２度目以降は表示しない
②ローディング画像が消えるときはふわっとフェードアウトする
ということをやりたいです。

①のみだけならできたのですが、フェードアウトをいれると、ローディング画像が一瞬で消えてしまったり、ずっとローディング画像が表示されたままだったり、うまくいきませんでした。

参考にしたサイトがclassの追加だったので、フェードアウトはcssでkeyframe変更すればいいのかと思ったのですが、jsを修正すべきでしょうか？

●html
<div class="splash">
<div class="splash-animation">
<img src="image/load.gif">
</div>
</div>

●css
.splash-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
z-index: 1000;
}
.splash.is-active {
opacity: 0;
visibility: hidden;
}
.splash-animation.is-active {
opacity: 1;
visibility: visible;
}

●js
$(function () {
var webStorage = function () {
if (sessionStorage.getItem('access')) {
$(".splash").addClass('is-active');
} else {
sessionStorage.setItem('access', 'true');
$(".splash-animation").addClass('is-active');
setTimeout(function () {
$(".splash").addClass('is-active');
$(".splash-animation").removeClass('is-active');
}, 3000);
}
}
webStorage();
});

回答No.1

retorofan · ベストアンサー

jsを修正すべきです。
setTimeoutの中でfadeOutメソッドを使用すればよいのです。

修正後のJSソース・サンプルを以下に示しますので、お試しください。
<script>
$(function () {
var webStorage = function () {
if (sessionStorage.getItem('access')) {
$(".splash").addClass('is-active');
} else {
sessionStorage.setItem('access', 'true');
$(".splash-animation").addClass('is-active');
setTimeout(function () {
$(".splash-animation").fadeOut(1000, function() {
$(".splash").addClass('is-active');
});
}, 3000);
}
}
webStorage();
});
</script>

お礼

返信が遅くなり申し訳ありません。
回答いただいたものを参考にjsを修正したところ、理想通りにフェードアウトさせることができました！

jsとcssの理解がまだまだ勉強不足だと実感しました。
またお世話になることがあるかと思いますので、そのときはよろしくお願いします。

ありがとうございました！