Css переход не работает в обратном направлении

Question

Требование: мне нужна плавная анимация на основе высоты элемента (который приводится в движение дочернего элемента)

Примечание: Пожалуйста, нажмите на элемент, чтобы развернуть

JSFiddle: https://jsfiddle.net/Lhmq0oqz/4/

То, что я пробовал: структура элемент будет выглядеть следующим образом

document.querySelector('.parent').addEventListener('click', function(eve) { 
 
    eve.currentTarget.className.indexOf('expand') == -1 ? eve.currentTarget.className = 'parent expand' : eve.currentTarget.className = 'parent'; 
 
});

.parent { 
 
    max-height: 200px; 
 
    width: 400px; 
 
    background-color: yellow; 
 
    transition: max-height 1s ease; 
 
    overflow: auto; 
 
} 
 
.child-wrap { 
 
    width: 100%; 
 
} 
 
.child1 { 
 
    width: 100%; 
 
    background-color: green; 
 
    transition: height 1s; 
 
} 
 

 
.child2 { 
 
    height: 0px; 
 
    width: 0px; 
 
    background-color: red; 
 
    transition: height 1s; 
 
    
 
} 
 
.parent.expand { 
 
    max-height: 400px; 
 
} 
 
.expand .child-wrap{ 
 
    display:table 
 
} 
 
.expand .child2 { 
 
    height: 100%; 
 
    width: 30%; 
 
    display: table-cell; 
 
    
 
} 
 
.expand .child1 { 
 
    width: 70%; 
 
    display: table-cell; 
 
    
 
} 
 
p { 
 
    margin:0; 
 
}

<div class="parent"> 
 
    <div class="child-wrap"> 
 
    <div class="child1"> 
 
     <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p> 
 
     <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p> 
 
    </div> 
 
    <div class="child2"> 
 
     <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p> 
 
     <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p> 
 
     <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p> 
 
     <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p> 
 
     <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p> 
 
     <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p> 
 
     <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p> 
 
    </div> 
 
    </div> 
 
</div>

правил: На родительском элементе расширяться только мне нужно, чтобы показать одну из ребенка. Родительский элемент должен иметь определенную максимальную-высоту в обоих государствах (свернуть/развернуть)

Проблема я столкнулся: переход работает в одном направлении (коллапс расширить), но не в других (развернуть свернуть).

Answer 1

Вам также необходимо добавить переход к Child2 элементу, как это элемент, который переходит

.child2{ 
    height: 0px; 
    width: 0px; 
    background-color: red; 
    transition:height 1s; 
    } 

jsFiddle

Answer 2

Вы можете попробовать это, я только что добавили эффекты перехода ваши дочерние элементы css.

.parent{ 
    max-height: 200px; 
    width: 400px; 
    background-color: green; 
    transition: max-height 1s ease; 
    display: flex; 
    overflow:auto; 
} 
.parent.expand{ 
    max-height: 400px; 
} 
.child1{ 
    width: 70%; 
    height: 100px; 
-webkit-transition: all 2s; /* Safari */ 
    transition: all 2s; 
} 
.child2{ 
    height: 0px; 
    width: 0px; 
    background-color: red; 
-webkit-transition: all 2s; /* Safari */ 
    transition: all 2s; 
} 
.expand .child2{ 
    height: 800px; 
    width: 30%; 
}