表示・非表示の切り替えにアニメーションを付けたいです

Question

前提・実現したいこと

記事の一覧ページを作成しています。
HTML内にある情報をチェックボックスなどで絞り込んだ際にhideクラスを付与し、
display:noneで表示・非表示を切り替えて画面上で絞り込みされているようにしています。

絞り込み結果が表示される時に記事がフワッと出てくるようなアニメーションをつけたいです

該当のソースコード

<button id="filterBtn" type="button" onClick="hyouji()>検索する</button>
<ul class="filter-items" id="contentCase">
<li data-filter-key="fa3 fa4 tfa3 th1 th2 th3 th4 th5 th6 ta5 ho5 co5">
<p>夫婦のみ | ペット | 2階 | 40～50坪 | 吹抜け | ロフト | リビング | インテリア | 収納 | 家事動線 | 融合 | スポーツ | エボニー</p>
</li>
<li data-filter-key="fa1 tfa3 th1 th2 th3 th4 th5 th6 ta5 co6">
<p>子育て | 2階 | 40～50坪 | 吹抜け | ロフト | リビング | インテリア | 収納 | 家事動線 | 融合 | ダーク</p>
</li>
<li data-filter-key="tfa3 th1 th3 th4 th5 th6 ta5 co4">
<p>2階 | 40～50坪 | 吹抜け | リビング | インテリア | 収納 | 家事動線 | 融合 | ミディアム</p>
</li>
<li data-filter-key="fa1 tfa2 th1 th2 th3 th4 th5 th6 ta1 co7">
<p>子育て | 2階 | 30～40坪 | 吹抜け | ロフト | リビング | インテリア | 収納 | 家事動線 | 和 | ブラック</p>
</li>
</ul>

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

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

リロードして最初にクリックした際にはふわっと表示できたのですがリロードなしで二回目以降はふわっとなりませんでした

追記

表示されている→絞り込みを実行→一度全ての記事を非表示にし、該当の記事をふわっと表示
のようにボタンで絞り込みを実行した際にふわっと表示させたいです
一度全ての記事を非表示にする段階でもできたらふわっと消したいです

ボタンをクリックする度にふわっと表示させたいです

Comments

[yambejp]

もともと表示されているのは一度けしてからふわっと表示するのですか？
消す方はふわっとしてなくてよいのでしょうか？

[spraut]

質問がわかりづらくて申し訳ございません
追記致しました

[m.ts10806]

「可能なのでしょうか」が質問でしたら「可能です」となります。
自身が調べたこと試したことを記載し、それについて確認した方が良いと思います。

[yambejp]

絞り込みはもう済んでるのですからなんでもかんでも全部見せるのはやめましょう
フェードインにしぼった処理だけ質問し、ご自身のソースに適用さてください

[spraut]

どう質問していいかわからず大きく質問し、色々とコードを載せてしまい申し訳ございません
もう少し範囲を考えて質問するようにします

Answer 1

CSSのキーフレームアニメが一般的です

@keyframes fadeIn {
  from{opacity: 0}
  to {opacity: 1}
}

Comments

[yambejp]

<style>
.hide{
display:none;
}
@keyframes fadeIn {
from{opacity: 0}
to {opacity: 1}
}
#ul1 li.view{
animation: fadeIn 1s;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('[data-fadein]').forEach(x=>{
x.addEventListener('click',(e)=>{
var view=e.target.dataset["fadein"].split(",");
document.querySelectorAll('#ul1 li').forEach((x,y)=>{
var flg=view.includes((y+1).toString());
x.classList.toggle('hide',!flg);
x.classList.toggle('view',flg);
});
});
});
});
</script>

<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<input type="button" value="2と3" data-fadein="2,3">
<input type="button" value="1と4" data-fadein="1,4">
<input type="button" value="1と3と5" data-fadein="1,3,5">

[yambejp]

最初全部見せるのであれば当初はfadeinしてはまずそうなので
viewというクラスがついたときに発動させています

[spraut]

ありがとうございます！

[yambejp]

一応、合体したsampleつけときますね

https://codepen.io/yambejp/pen/XWdpEMO

[spraut]

ご丁寧に重ね重ね本当にありがとうございます…！！
助かりました…