I am currently working on an animation that involves fading out text in a list and collapsing the list when the heading is clicked. However, I am facing a few issues with the code provided in this example.
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');
});
- Initially clicking on the heading results in the list fading out and the height decreasing as expected. However, subsequent clicks cause the list height to abruptly go to 0 instead of shrinking gradually.
- Upon expanding the list again, it abruptly jumps to full height every time, instead of smoothly expanding over the duration of the transition.
I would like to know how I can make the list consistently expand and collapse without any abrupt changes.