クラス名の付け外しを同時に行いたいです

Question

前提・実現したいこと

一度のクリックでclassを外す、付けるを行いたいです

該当のソースコード

<button id="filterBtn" type="button" onClick="hyouji()">ボタン</button>
	
	<ul id="contentCase">
		<li>1</li>
		<li>2</li>
		<li>3</li>	
	</ul>

@keyframes fadeIn {
		from{opacity: 0}
		to {opacity: 1}
	}
	.view{
		animation: fadeIn 1s;
	}

function hyouji(){
	document.getElementById('contentCase').classList.add('view');
}

試したこと

.addではclassを付けっぱなしになってしまい、フェードインのアニメーションが一度しかできなかったので.toggleに変更しました。すると、クリックごとに付ける→外す→付ける→外すとなってしまいました

Comments

[maisumakun]

具体的にどうしたいのでしょうか。その場で外してつけた場合、「何も起きない」かもしれません。

[yambejp]

前回の回答の補足に書いたとおり、setTimeoutなどで微妙に時間差をつけるのが吉

[spraut]

>maisumakun様
classを付与した際にfadeInのアニメーションが動いたので、その場で外して付ければ常にアニメーションが動いてくれると思いました

>yambejp様
そちらの方法が一番よかったです。ありがとうございます…！

Answer 1

単純にclasslistから該当のクラスが存在するか確認すれば良いのでは。

※未検証

let contentcase =  document.getElementById('contentCase');
if(!contentcase.classList.contains('view')){
 contentcase.classList.add('view');
}else{
 contentcase.classList.remove('view');
}