小编典典

在过渡结束时调用回调

javascript

我需要使用D3.js制作FadeOut方法(类似于jQuery)。我需要做的是使用将不透明度设置为0
transition()

d3.select("#myid").transition().style("opacity", "0");

问题是我需要一个回调来实现转换完成的时间。如何实现回调?


阅读 246

收藏
2020-05-01

共1个答案

小编典典

您要监听过渡的“结束”事件。

// d3 v5
d3.select("#myid").transition().style("opacity","0").on("end", myCallback);

// old way
d3.select("#myid").transition().style("opacity","0").each("end", myCallback);

从文档中transition.each([type],listener)

如果指定了 type ,则为过渡事件添加一个侦听器,同时支持“开始”和“结束”事件。即使过渡具有恒定的延迟和持续时间,也会为过渡中的每个单独元素调用侦听器。当每个元素开始转换时,开始事件可用于触发瞬时更改。通过选择当前元素this,并派生新的过渡,可以将结束事件用于启动多阶段过渡。在结束事件期间创建的任何过渡都将继承当前的过渡ID,因此不会覆盖以前计划的较新过渡。

最后,请注意,如果您只想在元素淡出后(过渡完成后)将其删除,则可以使用transition.remove()

2020-05-01