Css transition is not working in reverse direction

animation, css, css-animations

Solution

You will also need to add the transition to the child2 element as this is the element which is transitioning

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

jsFiddle

Problem

Requirement: I need smooth animation based on element's height (which is driven by child element) Note: Please click on the element to expand JSFiddle: https://jsfiddle.net/Lhmq0oqz/4/ What I have tried: The element structure will be as follows ``` 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> ``` Rules: On parent element expand only I need to show one of the child. Parent element should have certain maximum-height in both the states (collapse/expand) Problem I am facing: transition is working in one direction(collapse to expand) but not in other (expand to collapse).

Original source