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

Question

我要做的是使用纯CSS和HTML。我也不能使用`-webkit转换：top 1s；而且所有div的高度都必须设置为auto，这取决于内容，因此不能对div使用固定高度，也不能触摸最大高度值。

问题是，当我试图隐藏父div时，所有子div都会在它向上滑动之前出现一秒钟。如何修复？试一下下面的片段。

#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

我刚刚找到了一个解决方案。只需要把CCD_ 1放在CCD_。希望这可能对有帮助

#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>

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