D3 mouseover过渡被“卡住”
D3 mouseover过渡被“卡住”
提问于 2013-02-18 19: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-18 21: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
复制相关文章
相似问题
D3 Mouseover没有开火
D3工具提示+ Mouseover
D3 Mouseover/Mouseout冲突
D3 Mouseover和Mouseout
d3交联mouseOver节点
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
