在单击按钮显示该容器之前，将容器保持在流程之外的正确方法是什么？

Question

我一直在努力让容器远离流程，直到我单击按钮来显示它们。也许这是一个根本性的事情。在此示例中，当我单击以下任何类别：男士、女士、儿童时，我会显示 5 个链接和一个 svg，但我希望实现平滑过渡。问题是我使用不显示并且过渡不适用于显示在此处输入图像描述

在下面的示例中，为了简单起见，我将显示链接的代码。所以 subgenderman、subgenderwomen、subgenderkids 是链接的 ul，并且不显示给任何人，直到选中 man、women、kids 为止，显示将是 Flex 的。

<ul class="gendersection">
                        <li><label for="women" class="gender-label">WOMEN</label></li>
                        <li><label for="men" class="gender-label">MEN</label></li>
                        <li><label for="kids" class="gender-label">KIDS</label></li>
                </ul>

                <!-- Hidden radio buttons  FOR MEN WOMEN KIDS-->
                
                <input type="radio" name="gender" id="women" class="gender-radio">
                <input type="radio" name="gender" id="men" class="gender-radio">
                <input type="radio" name="gender" id="kids" class="gender-radio">

                <!-- MAN LIST LINKS -->
                <ul class="subgenderman">
                    <li><a href="#">TrendingM</a></li>
                    <li><a href="#">ClothingM</a></li>
                    <li><a href="#">AccesoriesM</a></li>
                    <li><a href="#">ShoesM</a></li>
                    <li><a href="#">SportM</a></li>
                </ul>
                <!-- WOMAN LIST LINKS -->
                <ul class="subgenderwomen">
                    <li><a href="#">TrendingW</a></li>
                    <li><a href="#">ClothingW</a></li>
                    <li><a href="#">AccesoriesW</a></li>
                    <li><a href="#">ShoesW</a></li>
                    <li><a href="#">SportW</a></li>
                </ul>
                <!-- KIDS LIST LINKS -->
                <ul class="subgenderkids">
                    <li><a href="#">TrendingK</a></li>
                    <li><a href="#">ClothingK</a></li>
                    <li><a href="#">AccesoriesK</a></li>
                    <li><a href="#">ShoesK</a></li>
                    <li><a href="#">SportK</a></li>
                </ul>
.subgenderman , .subgenderwomen , .subgenderkids{
            transition: 2s;
            display: none;                
        }

        /* Show subgender when the 'men/women/kids' radio button is selected */
        #men:checked ~ .subgenderman,   #women:checked ~ .subgenderwomen,    #kids:checked ~     .subgenderkids{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding-top: 3rem;
            align-self: center; 
            }

Answer 1

您可以将

display:none

与

opacity:0

一起使用。过渡不适用于显示，但适用于不透明度。当用户单击单选按钮时，首先设置显示，然后将不透明度设置为 100。

希望这有帮助...