如何解决在mousemove事件中使用Transitionend
我的页面有两个div(#red
和#blue
)和一个绑定到文档对象的mousemove事件-我无法更改此事件。 (链接到JSFiddle)
当光标进入红色div时,蓝色div被向下推50px。 mousemove处理程序通过
- 向蓝色div添加属性
data-moved
(此属性为蓝色div的top属性添加过渡效果,并表示该div已移动) - 将蓝色div的顶部位置设置为50px。
这按预期工作。
当指针离开红色div时,蓝色div使用与向下按下相同的过渡效果被推回其原始位置。为此,我首先检查蓝色div是否已移动(即restore.hasAttribute('data-moved')
是否为true
)。如果已移动,则将transitionend
和transitioncancel
事件绑定到它,然后将其顶部位置重置为0。更改顶部位置的值会触发过渡效果,进而触发过渡效果。过渡事件。过渡结束或被取消后,transitionend
和transitioncancel
事件处理程序会在将自己从蓝色div解除绑定之前,删除data-moved
属性。
此方法在99.9%的时间内正常工作,但过渡事件处理程序无法触发,并且很少data-moved
属性一旦恢复到原始位置后就不会从蓝色div中删除:
此问题很难重现,并且在使光标非常快速地退出并重新进入红色div时似乎随机发生,如下所示:
我真的想确保我了解这里发生的事情。由于无法随意重现该问题,因此不确定如何解决该问题。
问题似乎是当光标非常快地进入和退出红色div时,转换事件不会触发。我的浏览器(Chome v87)与transitionend和transitioncancel都兼容。我能想到的唯一其他解释是,当光标进入红色div时,最高值的过渡会排队。但是,如果光标足够快地离开红色,则在过渡开始之前就没有变化,那么当mousemove处理程序再次查询它时,最高值保持不变,因此不会触发过渡事件。 这正确吗?
根据W3:
过渡是一种表现效果。 a的计算值 属性会随着时间从旧值过渡到新值。 因此,如果脚本查询属性的计算样式,则为 正在过渡,它将看到一个中间值,代表 该属性的当前动画值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。