如何通过transition实现SVG元素的隐藏与显示？现有代码过渡失效

你遇到的问题核心在于：visibility是一个离散属性，它只有visible、hidden、collapse这几个离散值，没有中间过渡状态。D3的transition只能对有连续数值的属性（比如opacity、width、scale等）实现平滑动画，没法让visibility从可见到隐藏慢慢变化——它只会在动画结束的瞬间切换状态，所以你看不到过渡效果。

下面给你几种可行的解决方案，按实用程度排序：

方案1：使用opacity实现淡入淡出（最常用） #

把visibility换成opacity，因为opacity是0到1的连续数值，D3可以轻松做过渡动画。如果需要在隐藏后不占空间，可以在动画结束后再设置visibility: hidden：

<div id="bubble"></div> 
<div id="buttonHide"><button>Hide</button></div> 
<div id="buttonShow"><button>Show</button></div>

<script>
d3.select("#bubble")
  .append("svg")
  .append("g")
  .append("circle")
  .attr("class", "bubble")
  .attr("transform", "translate(100, 100)")
  .attr("r", 50)
  .attr("fill", "black");

d3.select("#buttonHide").on("click", function() {
  d3.select(".bubble")
    .transition()
    .duration(1000)
    .style("opacity", 0)
    .on("end", function() {
      // 动画结束后彻底隐藏，避免点击或占空间
      d3.select(this).style("visibility", "hidden");
    });
});

d3.select("#buttonShow").on("click", function() {
  d3.select(".bubble")
    .style("visibility", "visible") // 先恢复可见
    .transition()
    .duration(1000)
    .style("opacity", 1);
});
</script>

方案2：结合缩放动画+opacity（更丰富的效果） #

如果想要更自然的隐藏/显示效果，可以同时对缩放比例和透明度做过渡：

d3.select("#buttonHide").on("click", function() {
  d3.select(".bubble")
    .transition()
    .duration(1000)
    .attr("transform", "translate(100, 100) scale(0)")
    .style("opacity", 0)
    .on("end", function() {
      d3.select(this).style("visibility", "hidden");
    });
});

d3.select("#buttonShow").on("click", function() {
  d3.select(".bubble")
    .style("visibility", "visible")
    .attr("transform", "translate(100, 100) scale(0)") // 先设置初始缩放状态
    .transition()
    .duration(1000)
    .attr("transform", "translate(100, 100) scale(1)")
    .style("opacity", 1);
});

方案3：自定义tween函数（进阶） #

如果你一定要用visibility配合过渡，可以自定义tween函数，在动画过程中控制状态，但这种方式其实没必要，因为前面的方案已经足够好用：

d3.select("#buttonHide").on("click", function() {
  d3.select(".bubble")
    .transition()
    .duration(1000)
    .tween("visibility", function() {
      return function(t) {
        // t从0到1，当t接近1时设置为hidden
        d3.select(this).style("visibility", t > 0.9 ? "hidden" : "visible");
      };
    });
});

总结一下：优先用opacity或者结合缩放的方案，这是SVG元素过渡显示/隐藏的标准做法，既符合用户的视觉预期，也能完美利用D3的transition能力。

内容的提问来源于stack exchange，提问作者user6020020