使用 D3 (v5) 应用多个过渡答案

【问题标题】：Applying multiple transitions using D3 (v5)使用 D3 (v5) 应用多个过渡
【发布时间】：2019-01-13 11:54:06
【问题描述】：

我正在尝试创建一个动画，它会淡出列表中的文本，然后在您单击标题时折叠列表。在小提琴中我有here，有几个问题。

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');
  });

当第一次单击标题时，列表淡出并且列表高度降低，正如我所期望的那样。但是，后续单击列表高度并不会慢慢缩小。它只是弹出到 0。
当列表再次展开时，它会弹出到全高（无论点击次数如何），在整个过渡期间不会展开。

我怎样才能让列表不断地扩大和缩小？

【问题讨论】：

标签： javascript animation d3.js transition

【解决方案1】：

您首先必须在折叠面板之前捕获面板的高度，以便在还原时使用它。

链接动画并且不使用预先计算的延迟。

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>

【讨论】：