Сдвиньте вниз и сдвиньте div - только HTML и CSS

Question

Это то, что я пытаюсь сделать, должно быть с чистыми CSS и HTML. Я также не могу использовать `-webkit-transition: top 1s; а также высота всех div-ов должна быть установлена ​​на авто, зависит от содержимого, поэтому не может использовать фиксированную высоту для div-ов, а также не может касаться значений max-height.

Проблема в том, когда я пытаюсь скрыть родительский 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

Я только что нашел решение. просто нужно поместить 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>

Надеюсь, вам понравится, и, пожалуйста, дайте я знаю, если ваша проблема не решена.