D3 mouseover过渡被“卡住”
D3 mouseover过渡被“卡住”
提问于 2013-02-19 03:48:14
假设我想为导航菜单创建常规的悬停效果，但是我使用D3过渡来“柔化”效果，而不是CSS。对于.on-method，使用mouseover和mouseout可以很好地工作。然而，问题是，如果鼠标在转换完成之前离开悬停的链接，转换就会卡住。如何避免这种副作用？
例如，使用此代码时，如果速度太快，即使鼠标移动到其他位置，底部边框仍显示为橙色：
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"); });回答 1
Stack Overflow用户
回答已采纳
发布于 2013-02-19 05:12:50
我认为发生的情况是，当你只在mouseover上安装了.transition时，当你在1000ms到期之前离开时，转换仍然没有结束。因此，当您提前离开时，mouseover转换仍在运行，并且在mouseout事件上不会调用转换来覆盖此转换。(显然，即使是mouseout事件也不会停止与mouseover事件关联的.transition。)
但是，正如您所提到的，当您在mouseout事件上放置一个transition时，问题就消失了。我相信这是因为mouseout transition优先于mouseover .transition，所以在mouseout事件上使用.transition可以让mouseout事件重新得到控制。
如果您注释掉mouseout事件上的.transition，您可以在这里看到它的实际效果。
同样值得一读的是即将出版的Scott Murray's d3图书的第10章：http://ofps.oreilly.com/titles/9781449339739/_interactivity.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14944150
复制相关文章
相似问题
腾讯云开发者
