过渡和不透明度不能很好地协同工作

Posted 2023-03-06

【中文标题】过渡和不透明度不能很好地协同工作

【英文标题】：Transition and opacity does not work well together

【发布时间】：2014-11-05 20:27:55

【问题描述】：

我为点击触发的过渡设置了 1500 毫秒的持续时间

在第一次运行时，转换的持续时间似乎为 0 毫秒，这不是预期的 -_-

带有相应小提琴的最小示例（http://jsbin.com/pasodopeyati/3/edit）：

// create svg element
var svg = d3.select("body").append("svg").attr('width', 200).attr('height', 200);

// add 4 red circles
svg.selectAll('circle').data(['n': 0, 'n': 1, 'n': 2, 'n': 3])
  .enter()
  .append('circle')
  .attr(
    cx: function(d, i)  return (i % 2) * 50 + 50;,
    cy: function(d, i)  return Math.floor(i / 2) * 50 + 50;,
    r:10,
    fill: 'red'
  );


// counter
var i = 0;  

// create button and bind on click
d3.select("body").append('button').text('fade').on('click', function () 
  // fade 3 circles alternatively (cf. counter)
  svg.selectAll('circle')
  .transition()
  .duration(2000)
  .attr('opacity', function(d)  return d.n == i ? 1 : 0.1);

  i = (i + 1) % 4;
);

试试吧！您会注意到第一次点击会立即淡出 3 个圆圈，并且从该点击开始，它将按预期以 1500 毫秒的持续时间进行过渡。

如何使第一次转换的持续时间为 1500 毫秒？

奖励：为什么我的代码会这样？

【参考方案1】：

实际上我认为opacity 是style 参数而不是svg attribute。所以你也可以改变你的路线：

.attr('opacity', function(d) return d.n == i ? 1 : 0.1)

到

.style('opacity', function(d) return d.n == i ? 1 : 0.1)

结果相同。

【参考方案2】：

当您创建圆圈时，您没有指定任何不透明度，因此没有从/到过渡。试试这个：

  .attr(
    cx: function(d, i)  return (i % 2) * 50 + 50;,
    cy: function(d, i)  return Math.floor(i / 2) * 50 + 50;,
    // need this starting value
    opacity: 1
    r:10,
    fill: 'red'
  );