CODEWITHSUNDEEP
cssanimationcss-animations
kalki
kalki

Reputation: 495

Css transition is not working in reverse direction

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).

Upvotes: 6

Views: 3591

Answers (2)

hairmot
hairmot

Reputation: 2975

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

Upvotes: 3

shahid mohammad
shahid mohammad

Reputation: 272

You can try this, I have just added a transition effect to your css child elements.

.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%;
}

Upvotes: 1

Related Questions