0

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>

1
  • 質問欄に現状の画像は追加できませんか? 現状の画像と、それをどうしたいかを書いてもらった方が分かりやすいので。
    – WebSurfer
    Commented 2023年11月1日 3:58

1 件の回答 1

2

「隙間を無くす」という言葉の意味をhtml + cssに落とし込む際にどう考えるかです。例えば高さをゼロ(height: 0;)にすれば見かけ上の隙間はなくなります。

body ul.genre li {
  height: 0;
  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 {
    height: 100%;
    opacity: 100%;
  }
}
<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>

:has()疑似クラスはFirefoxを除いて概ね実装済みです。
残るFirefoxも2023/12/19リリースのFirefox 121で正式対応のようです。また既存のバージョンでもlayout.css.has-selector.enabledフラグを有効化することで対応します。このフラグはNightlyビルドやBetaビルドでは既に有効化済みです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。