score:1

Accepted answer

You first have to capture the height of the panel before you collapse it, so you can use it in the restore.

Chain the animations and not use a pre calculated delay.

d3.select('.panel-heading')
  .on('click',()=>{
    let p = d3.select('.panel-collapse');
    let height = p.node().clientHeight;
    p.transition()
      .duration(300)
      .style('opacity', '0')
      .transition()
      .duration(300)
      .ease(d3.easeLinear)
      .style('height','0px')
      .transition()
      .duration(10)
      .style('display','none')
      .transition()
      .delay(3000)
      .duration(10)
      .style('display','block')
      .transition()
      .duration(600)
      .ease(d3.easeLinear)
      //.style('display','block')
      .style('height', ''+height+'px')
      .transition()
      .duration(3000)
      .style('opacity','1');
  });
  
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="panel panel-default">
  <div class="panel-heading" role="button">
    Hello World
  </div>
  <div class="panel-collapse">
    <div> item1 </div>
    <div> item1 </div>
    <div> item1 </div>
    <div> item1 </div>
    <div> item1 </div>
  </div>
</div>


Related Query

More Query from same tag