絞り込み検索後の要素間の隙間を無くしたい


JavaScriptのワイルドカードでのあいまい検索検索結果後、`opacity: 0`
では検索結果後に要素間に隙間が出てしまうので、`display:none` にしてしまうと結果自体が消えてしまいます。  
結果の隙間を無くしたいのですがどうすればよいでしょうか(*>人<)

[code]

    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");
                });
            }
        });
    }
[/code]

[code]

    .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;
        }
    }
[/code]

[code]

    <!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>
[/code]




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

[code]

    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%;
      }
    }
[/code]

[code]

    <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>
[/code]

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




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

[code]

    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%;
      }
    }
[/code]

[code]

    <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>
[/code]

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

