JavaScriptのワイルドカードでのあいまい検索検索結果後、opacity: 0
では検索結果後に要素間に隙間が出てしまうので、display:none
にしてしまうと結果自体が消えてしまいます。
結果の隙間を無くしたいのですがどうすればよいでしょうか(*>人<)
const filterButtons = document.querySelectorAll("[data-filter]");
const genreContents = document.querySelectorAll("[data-genre]");
filterButtons.forEach((filterButton) => {
filterButton.addEventListener("click", buttonSwitch);
filterButton.addEventListener("click", genreFilter);
});
function buttonSwitch() {
filterButtons.forEach((filterButton) => {
filterButton.classList.remove("is-active");
this.classList.add("is-active");
});
}
function genreFilter() {
const buttongenre = this.selectedOptions[0];
const targetContents = document.querySelectorAll('[data-genre*="' + buttongenre + '"]');
genreContents.forEach((genreContent) => {
genreContent.animate(
[
{
opacity: 0,
},
{
opacity: 1,
},
],
{
duration: 600,
fill: "forwards",
}
);
if (buttongenre == "all") {
genreContent.classList.add("is-show");
} else {
genreContent.classList.remove("is-show");
targetContents.forEach((targetContent) => {
targetContent.classList.add("is-show");
});
}
});
}
.genre li.is-show {
display: block;
}
body ul.genre li {
opacity: 0;
}
body:has(select option:checked[data-filter="all"]) ul.genre li,
body:has(select option:checked[data-filter="a"]) ul.genre li[data-genre*="a"],
body:has(select option:checked[data-filter="b"]) ul.genre li[data-genre*="b"],
body:has(select option:checked[data-filter="c"]) ul.genre li[data-genre*="c"] {
animation: 600ms forwards genre;
}
@keyframes genre {
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<select>
<option value="all" data-filter="all" class="is-active">全て表示</option>
<option value="a" data-filter="a">A</option>
<option value="b" data-filter="b">B</option>
<option value="c" data-filter="c">C</option>
</select>
<ul class="genre">
<li data-genre="a">A+A</li>
<li data-genre="a-b">A+B</li>
<li data-genre="a-c">A+C</li>
<li data-genre="b">B+B</li>
<li data-genre="b-c">B+C</li>
<li data-genre="c">C+C</li>
</ul>
<script src="index.js"></script>
</body>
</html>