Question

假设我想为导航菜单创建常规悬停效果，但我使用D3过渡来“软化”效果而不是CSS。对于mouseover方法，使用mouseout和.on可以正常工作。但问题是，如果鼠标在转换完成之前离开悬停链接，则转换会卡住。如何避免这种副作用？

例如，使用此代码，即使鼠标移动到其他位置，如果执行速度过快，底部边框仍显示为橙色：

d3.selectAll("a")
    .on("mouseover", function() { 
       d3.select(this)
      .style("border-bottom-color", "#fff")
      .transition()
      .duration(1000)
      .style("border-bottom-color", "#B23600"); })
    .on("mouseout", function() { 
       d3.select(this)
      .style("border-bottom-color", "#fff"); });

Answer 1

我认为当.transition只有mouseover时，会发生什么事情，当您在1000ms过期之前离开时，过渡仍然没有完成。因此，当您提前离开时，鼠标悬停转换仍在运行，并且mouseout事件上没有转换调用来覆盖此转换。（显然，即使mouseout事件也不会停止与.transition事件相关联的mouseover。

但是，正如您所说，当您在mouseout事件上放置transition时，问题消失了。我相信这是因为mouseout transition 优先于mouseover .transition，因此在.transition事件上mouseout会使mouseout事件重新受到控制。

如果您在.transition事件上发表评论mouseout，您可以在此处看到它。

http://jsfiddle.net/Ldmv6/1/

另外值得一读的是Scott Murray's即将出版的d3书中的第10章：http://ofps.oreilly.com/titles/9781449339739/_interactivity.html

D3鼠标悬停转换“卡住”

1 个答案: