onclickでJavascriptによるcssアニメーションを動かしたい

前提・実現したいこと

javascriptとcssアニメーションに関して質問です。
ボタンを押すと画面いっぱいにグラデーションの背景とボタンに対応した文字がふわっと現れて消えるスクリプトを書こうと思ったのですが、
どなたか毎回機能するようにレクチャーしていただけないでしょうか？

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

ボタン押下の度にフェードイン、フェードアウトをさせたいのですが、現状は初回は正常で、二回目のボタン押下で機能せず、その次は正常機能するの繰り返しになってしまいます。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<title>test</title>
<meta charset="utf-8">
<style>
.bt{
margin:1vw; 
padding:1vw; 
border:1px #090 solid;
}
#sectionTitleBG{
display:block;
filter:opacity(0.5);
position:fixed;
top:0;
left:100%;
z-index:1;
width:100%;
height:100%;
background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
#sectionTitleBG.anime{
animation:sectionTitleAnim 2s linear 0s 1 normal;
}
@keyframes sectionTitleAnim{
0%{filter:opacity(0); left:0;}
20%{filter:opacity(0.9);}
70%{filter:opacity(0.9);}
99%{filter:opacity(0); left:0;}
100%{filter:opacity(0); left:100%;}
}
#sectionTitleTxt{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:100%;
color:#f00;
font-size:5vw;
font-weight:900;
text-align:center;
filter:drop-shadow(0.1vw 0.1vw 1vw #00f);
}
</style>
<script>
function fncSectionTitle(sectionTitle){
document.getElementById("sectionTitleTxt").innerText=sectionTitle;
const secbg=document.getElementById("sectionTitleBG");
if (secbg.className==null || secbg.className==""){
secbg.className="anime";
} else {
secbg.className="";
}
}
</script>
</head>
<body>
<div id="sectionTitleBG"><div id="sectionTitleTxt">テスト</div></div>
<div class="floatMenuChild">
<a href="#" class="bt" onclick="fncSectionTitle('あああ')">あああ</a>
<a href="#" class="bt" onclick="fncSectionTitle('いいい')">いいい</a>
<a href="#" class="bt" onclick="fncSectionTitle('ううう')">ううう</a>
<a href="#" class="bt" onclick="fncSectionTitle('えええ')">えええ</a>
<a href="#" class="bt" onclick="fncSectionTitle('おおお')">おおお</a>
</div>
</body>
</html>

試したこと

Javascript自体がシンプルなので手詰まりです。

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

特にないのでよろしくお願いします。

itzuakniami123

2020/10/28 07:19

ボタンを押すとフェードインしてイベントが発生し、もう一度押すとフェードアウトして消えるという仕組みを作りたいという認識で合っていますか？

puripurizaemon

2020/10/28 08:12 編集

質問ありがとうございます。そうではなく、フェードイン⇒文字を表示⇒フェードアウトというのが一連の動作で、それをボタン押下の度に繰り返したいのです。

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

回答1件

自己解決

スマートな方法ではないのですが自己解決したので方法を投稿します。

function fncSectionTitle(sectionTitle){
	document.getElementById("sectionTitleTxt").innerText=sectionTitle;
	const secbg=document.getElementById("sectionTitleBG");
	if(secbg.classList.contains('anime')){
		secbg.classList.remove('anime');
	} else {
		secbg.classList.add("anime");
		setTimeout(function(){secbg.classList.remove('anime')}, 2000);
	}
}

JSの部分でclassListを使ってアニメーションの後のタイミングでリムーブさせました。
こうした方が良いよとかあったら教えてください。
この質問を見てくださった方ありがとうございました。

投稿2020/10/28 09:25

puripurizaemon

総合スコア1