为什么在d3中添加元素后，.duration会充当.delay

Why would .duration act as .delay after appending an element in d3?

本文关键字：duration delay d3 添加 元素 为什么      更新时间：2023-09-26

我一直在d3中构建一个简单的轻量级进度条小部件，当我试图为它设置过渡时，遇到了一些奇怪的事情:

http://codepen.io/emoody/pen/oJFGI?编辑= 101

所讨论的块是:

  enter //the name of my d3 function
  .append("div")
    .attr("class", "progress")
    .style("width",0)
  .transition()
    .duration(1500)
    .style("width", function(d) { return x(d) * (100/maxRange) + "%"; });

它不是立即开始过渡，然后在1500毫秒内动画到全宽度，而是等待1500毫秒，然后在默认持续时间内动画。(你可以看到链接笔的行为)

我和一个同事的猜测是，它实际上是在过渡其他一些元素，没有实际的变化，然后是这个，导致延迟的出现，但我不明白为什么会这样。

问题是你在CSS中放置了一个干扰的过渡。特别是

transition: all 500ms;

正在改变你试图在D3中设置的过渡。

删除这个CSS可以修复这个问题。完整的演示在这里。

相关文章：