Applying multiple transitions using D3 (v5)

Question

I am trying to create an animation which fades out text in a list then collapses the list when you click on the heading. In the fiddle I have here , there are a couple of issues.

d3.select('.panel-heading')
  .on('click',()=>{
    let p = d3.select('.panel-collapse');
    p.transition()
      .duration(300)
      .style('opacity', '0');
    p.transition()
      .delay(300)
      .duration(300)
      .ease(d3.easeLinear)
      .style('height','0px');
    p.transition()
      .delay(600)      
      .duration(300)
      .style('display','none');

    p.transition()
      .delay(3000)
      .duration(10)
      .style('display','block');
    p.transition()
      .delay(3010)
      .duration(600)
      .ease(d3.easeLinear)
      //.style('display','block')
      .style('height','auto');
    p.transition()
      .delay(3610)
      .duration(3000)
      .style('opacity','1');
  });

1. When clicking on the heading the first time the list fades out and the list height reduces as I would expect. However, subsequent clicks the list height does not shrink slowly. It just pops to 0.
2. When the list expands again it pops to full height (regardless of the number of clicks) not expanding throughout the duration of the transition.

How can I get the list to expand and shrink consistently?

Answer 1

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>