БЛОГ НА HUSL


Плавное раскрытие
через transition

Автор вопроса: Ar Santa

Подскажите пожалкйста, как сделать так, чтобы при появлении блока из display none в display block, тот div который находится "сверху" (родитель) плавно менял высоту, я пробовал давать overflow hidden и transition 0.3s height, но не получалось... Спасибо!

                    <div class="profile-information box">
                        <div class="information" id="information">
                            <div class="statuse-block">
                                <p class="p-status">Статус:</p><input id="status" type="text" maxlength="140" placeholder="Изменить статус" value="Типо вот такой вот статус, ыы)">
                            </div>
                            <p>День рождения: 03.03.2003</p>
                            <p>Город: Санкт-Петербург</p>
                        </div>

                        <div class="big-information" id="big-information" style="display: none;">
                            <p>Родной город: Москва</p>
                            <p>Языки: Русский, Українська, English</p>
                            <p>Семейное положение: Все сложно</p>
                            <p>Пол: Мужской</p>
                            <p>Телефон: +00000000000</p>
                        </div>

                        <button id="open-information" onclick="(document.getElementById('big-information').style.display='block'), (document.getElementById('close-information').style.display='block'), (document.getElementById('open-information').style.display='none')">Показать информацию полностью</button>
                        <button id="close-information" style="display: none;" onclick="(document.getElementById('big-information').style.display='none'), (document.getElementById('close-information').style.display='none'), (document.getElementById('open-information').style.display='block')">Скрыть дополнительную информацию</button>
                    </div>

.box {
    position: relative;
    padding: 15px;
    border-radius: 40px;
    background: rgba(0, 0, 0, 0.3);
    margin: 0 0 10px 0;
    transition: background 0.1s;
}

.profile-information {
    padding: 20px;
}

.information {
    margin: 0 0 10px 0;
}

.statuse-block {
    display: flex;
    justify-content: space-between;
}

.p-status {
    display: inline-block;
    float: left;
}

#status {
    width: 100%;
    padding: 0 5px;
    color: #FFF;
    background: rgba(0, 0, 0, 0);
    border: 0;
    outline: 0;
    cursor: pointer;
}

#status:focus {
    border-bottom: 1px solid #FFF;
}

.big-information {
    margin: 0 0 10px 0;
}

#open-information {
    width: 100%;
    color: skyblue;
    background: rgba(0, 0, 0, 0);
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: 0.3s color;
}

#close-information {
    width: 100%;
    color: skyblue;
    background: rgba(0, 0, 0, 0);
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: 0.3s color;
}

#open-information:hover {
    color: #FFF;
}

#close-information:hover {
    color: #FFF;
}

Пример:

<div id="a">
     <div id="b"></div>
     <div id="c"></div>
</div>

У блоки с ИД "c" стиль Display none, можно ли сделать для блока с ИД "a" плавную height при раскрытии блока с ИД "c" из display none в block ?


Источник

Ответы (2 шт):

Автор решения: Sanya H

Как вариант, можете поиграться с max-height устанавливая ее с 0 до какого-то максимального значения. Вот пример (наведите курсор на В)

const el = $('#c1');
const h = el.height();
el.height(0).show();
$('#b1').click(() => el.height(h))
.wrap {
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
}

.wrap > div {
  flex: 1;
}

#c {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 1s;
  transition: max-height 1s;
}

#b:hover + #c{
  max-height: 150px;
}

#c1 {
  overflow: hidden;
  display: none;
  -webkit-transition: height 0.5s ease-out;
  transition: height 0.5s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="a">
     <div id="b">id B</div>
     <div id="c">id C</div>
     <div id="d">id D</div>
</div>

<div id="a1">
     <div id="b1">id B1</div>
     <div id="c1">id C1</div>
     <div id="d1">id D1</div>
</div>

</div>

→ Ссылка
Автор решения: Rudi

Попробуй так, здесь высота содержимого рассчитывается налету..

let bigInf;
let clInf;
let opInf;
window.onload = function() {
  bigInf = document.getElementById('big-information');
  clInf = document.getElementById('close-information').style;
  opInf = document.getElementById('open-information').style;
}

function op(){
  let height = 0;
  for(var i =0; i < bigInf.children.length; i++){
    let el = bigInf.children[i]
    height+=el.offsetHeight;
    height+=parseInt(window.getComputedStyle(el).getPropertyValue('margin-bottom'));
    //height+=parseInt(window.getComputedStyle(el).getPropertyValue('margin-top'));// возможно тоже надо будет учесть
  }
  bigInf.style.transition = '.5s height, 1.3s opacity';
  clInf.display = "block";
  opInf.display ="none";
  bigInf.style.height= height + "px";
  bigInf.style.opacity="1";
}
function cl(){
  bigInf.style.transition = '1s height, .3s opacity';
  clInf.display = "none";
  opInf.display ="block";
  bigInf.style.height="0px";
  bigInf.style.opacity="0";
}
.box {
    position: relative;
    padding: 15px;
    border-radius: 40px;
    background: rgba(0, 0, 0, 0.3);
    margin: 0 0 10px 0;
    transition: background 0.1s;
}

.profile-information {
    padding: 20px;
}

.information {
    margin: 0 0 10px 0;
}

.statuse-block {
    display: flex;
    justify-content: space-between;
}

.p-status {
    display: inline-block;
    /* float: left; */
}

#status {
    width: 100%;
    padding: 0 5px;
    color: #FFF;
    background: rgba(0, 0, 0, 0);
    border: 0;
    outline: 0;
    cursor: pointer;
}

#status:focus {
    border-bottom: 1px solid #FFF;
}

.big-information {
    margin: 0 0 10px 0;
    height: 0px;
    opacity: 0;    
}

#open-information {
    width: 100%;
    color: skyblue;
    background: rgba(0, 0, 0, 0);
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: 0.3s color;
}

#close-information {
    width: 100%;
    color: skyblue;
    background: rgba(0, 0, 0, 0);
    border: 0;
    outline: 0;
    display: none;
    cursor: pointer;
    transition: 0.3s color;
}

#open-information:hover {
    color: #FFF;
}

#close-information:hover {
    color: #FFF;
}
<div class="profile-information box">
    <div class="information" id="information">
        <div class="statuse-block">
            <p class="p-status">Статус:</p><input id="status" type="text" maxlength="140" placeholder="Изменить статус" value="Типо вот такой вот статус, ыы)">
        </div>
        <p>День рождения: 03.03.2003</p>
        <p>Город: Санкт-Петербург</p>
    </div>

    <div class="big-information" id="big-information">
        <p>Родной город: Москва</p>
        <p>Языки: Русский, Українська, English</p>
        <p>Семейное положение: Все сложно</p>
        <p>Пол: Мужской</p>
        <p>Телефон: +00000000000</p>
    </div>

    <button id="open-information" onclick="op()">Показать информацию полностью</button>
    <button id="close-information" onclick="cl()">Скрыть дополнительную информацию</button>
  </div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.