格过渡

Question

期间不会激发我有一个onclick函数的简单的div（注意我删除为可读性SVG内容）：

<div id="sidebar-toggler"> 
    <svg></svg> 
</div> 

body.on('click', '#sidebar-toggler', function() { 
    $('#sidebar').toggleClass('collapsed'); 
}); 

，这是没有问题干活。但在div也有一个traqnsition一点点移到右侧悬停：

&:hover 
    left: 30px 
    transition: left 0.4s ease-out 

现在，有时（经常）在过渡期间，将不会触发Click事件。这是一个常见的问题，有没有解决这个问题？ 我试过的东西是制作一个封装div，它和动画一样大。但问题仍然存在。

我所做的就是添加一个包装以防万一我一轮的div像这样：

() = Round div (button) 
_________ 
|  | = wrapper 
_________ 

transition 
From: 
_________ 
|() | 
_________ 
To: 
_________ 
| ()| 
_________ 

，当然我重新映射的onclick的包装。我认为，因为onclick在包装上，并且现在在包装上有转换，应点击onclick。但正如所说，迄今为止没有成功。

Answer 1

这是因为click非常敏感：您必须点击鼠标双方向下移动和而不移动元素。

你可以使用鼠标按下或鼠标松开来代替：

body.on('mouseup', '#sidebar-toggler', function() { 
    $('#sidebar').toggleClass('collapsed'); 
}); 

这将不依赖于运动。

如果在非移动元素上有onClick方法，但移动鼠标时也会发生同样的情况。它不起作用，因为它是一个拖动而不是点击。