向下滑动和向上滑动 div - 仅限 HTML 和 CSS

Question

我正在尝试使用纯 CSS 和 HTML。我也不能使用 `-webkit-transition: top 1s;并且所有 div 的高度都必须设置为 auto 取决于内容，因此不能为 div 使用固定高度，也不能触及 max-height 值。

问题是当我尝试隐藏父 div 时，所有子 div 会在它向上滑动之前出现一秒钟。如何解决？用下面的 sn-p 试试吧。

#variation {
box-sizing: border-box;
border: 0.05em solid #ddd;
background-color: #f5f5f5;
height: auto;
max-height: 0px;
transition: 0.8s ease-in-out;
overflow: hidden;

}
#variation .variation_div_main {
visibility: visible;
transition: 0.8s ease-in-out;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
position: relative;
}
.variation_div {
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
-moz-flex-direction: row;
justify-content: space-around;
position: relative;
overflow: hidden;
}

#t1:checked ~ #div-main #variation,
#t1:checked ~ #div-main #fiat {
visibility: visible;
display: block !important;
max-height: 2000px;
}
#t1:checked ~ #div-main .variation_div_main:not(#fiat)  {
display: none !important;
}

#t2:checked ~ #div-main #variation,
#t2:checked ~ #div-main #ford {
visibility: visible;
max-height: 2000px;
}
#t2:checked ~ #div-main .variation_div_main:not(#ford)  {
display: none !important;
}

close <input type="radio" id="t0" name="tabs" checked="checked"/><br>
fiat <input type="radio" id="t1" name="tabs"/><br>
ford <input type="radio" id="t2" name="tabs"/><br>

<div id="div-main">
<div id="variation">
<div id="fiat" class="variation_div_main">
<div class="variation_div">
<div class="variation_div_photo">
Picture 
</div>
<div class="variation_div_description">
<b>Fiat Ducato</b><br>
Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description 
</div>
</div>
</div>



<div id="ford" class="variation_div_main">
<div class="variation_div">
<div class="variation_div_photo">
Picture
</div>
<div class="variation_div_description">
<b>Ford Transit</b><br>
Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description 
</div>
</div>
</div>


</div></div>

Answer 1

我刚刚找到了解决方案。只需将max-height: 0px; transition: 2s ease-in-out; 放入#variation .variation_div_main 部分。希望对某人有所帮助

#variation {
box-sizing: border-box;
border: 0.05em solid #ddd;
background-color: #f5f5f5;
height: auto;
max-height: 0px;
transition: 2s ease-in-out;
overflow: hidden;

}
#variation .variation_div_main {
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
position: relative;
max-height: 0px;
transition: 2s ease-in-out;
}
.variation_div {
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
-moz-flex-direction: row;
justify-content: space-around;
position: relative;
overflow: hidden;
}

#t1:checked ~ #div-main #variation,
#t1:checked ~ #div-main #fiat {
max-height: 2000px;
}
#t1:checked ~ #div-main .variation_div_main:not(#fiat)  {
display: none !important;
}

#t2:checked ~ #div-main #variation,
#t2:checked ~ #div-main #ford {
max-height: 2000px;
}
#t2:checked ~ #div-main .variation_div_main:not(#ford)  {
display: none !important;
}

close <input type="radio" id="t0" name="tabs" checked="checked"/><br>
fiat <input type="radio" id="t1" name="tabs"/><br>
ford <input type="radio" id="t2" name="tabs"/><br>

<div id="div-main">
<div id="variation">
<div id="fiat" class="variation_div_main">
<div class="variation_div">
<div class="variation_div_photo">
Picture 
</div>
<div class="variation_div_description">
<b>Fiat Ducato</b><br>
Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description 
</div>
</div>
</div>



<div id="ford" class="variation_div_main">
<div class="variation_div">
<div class="variation_div_photo">
Picture
</div>
<div class="variation_div_description">
<b>Ford Transit</b><br>
Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description 
</div>
</div>
</div>


</div></div>

Answer 2

我刚刚很容易地解决了您的问题，这是我添加到您的 CSS 中的内容， 如果你只是添加

#t0:checked ~ #div-main #variation{
 display: none !important;
}

这是一个新的变化，当你点击关闭时它会慢慢向上滑动

#t0:checked ~ #div-main #variation .variation_div_main{
    visibility: collapse;
    transition: 0.8s visibility;
}

到你的样式表中，它会工作得很好，我会把 CSS 和 HTML 放在下面

<html>
<head>

    <title>StackOverFlow</title>
    <style>
        #variation {
            box-sizing: border-box;
            border: 0.05em solid #ddd;
            background-color: #f5f5f5;
            height: auto;
            max-height: 0px;
            transition: 0.8s ease-in-out;
            overflow: hidden;

        }
        #variation .variation_div_main {
            visibility: visible;
            transition: 0.8s ease-in-out;
            display: flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            -moz-flex-direction: column;
            position: relative;
        }
        .variation_div {
            display: flex;
            flex-direction: row;
            -webkit-flex-direction: row;
            -moz-flex-direction: row;
            justify-content: space-around;
            position: relative;
            overflow: hidden;
        }

        #t1:checked ~ #div-main #variation,
        #t1:checked ~ #div-main #fiat {
            visibility: visible;
            display: block !important;
            max-height: 2000px;
        }
        #t1:checked ~ #div-main .variation_div_main:not(#fiat)  {
            display: none !important;
        }

        #t2:checked ~ #div-main #variation,
        #t2:checked ~ #div-main #ford {
            visibility: visible;
            max-height: 2000px;
        }
        #t2:checked ~ #div-main .variation_div_main:not(#ford)  {
            display: none !important;
        }

        #t0:checked ~ #div-main #variation{
            display: none !important;
        }

    </style>
</head>

<body>

close <input type="radio" id="t0" name="tabs" checked="checked"/><br>
fiat <input type="radio" id="t1" name="tabs"/><br>
ford <input type="radio" id="t2" name="tabs"/><br>

<div id="div-main">
    <div id="variation">

        <div id="fiat" class="variation_div_main">
            <div class="variation_div">
                <div class="variation_div_photo">
                    Picture
                </div>
                <div class="variation_div_description">
                    <b>Fiat Ducato</b><br>
                    Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description Some fiat description
                </div>
            </div>
        </div>


        <div id="ford" class="variation_div_main">
            <div class="variation_div">
                <div class="variation_div_photo">
                    Picture
                </div>
                <div class="variation_div_description">
                    <b>Ford Transit</b><br>
                    Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description Some ford description
                </div>
            </div>
        </div>

    </div>
</div>

</body>
</html>

希望您喜欢，如果您的问题没有解决，请告诉我。