鼠标移动阻止了'transitionend'事件的触发。

Question

介绍

我正在使用Semantic-UI的侧边栏功能，它提供了一个按钮来触发从左侧推出内容的侧边栏。

我想通过鼠标悬停在左侧来展开同样的侧边栏。我意识到有几种方法可以实现这一点（通常会有多种方法）。也许只需检查鼠标的X位置就可以解决，但这不是重点。我选择在左侧创建一个透明的div，并将其:hover伪类用于触发侧边栏：

// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');
// hover transparent div to trigger the sidebar too:
$('.sidebar-trigger').hover(function() {
    $('.ui.sidebar').sidebar('show')
});
// hide() and show() the sidebar accordingly to use the sidebar:
$('.ui.sidebar').sidebar('setting', {
    onShow: function() {
        $('.sidebar-trigger').hide();
    },
    onHidden: function() {
        $('.sidebar-trigger').show();
    }
});

问题

现在，除了一个情况外，所有都正常工作：当您打开侧边栏时，不停地移动鼠标。我已经查看了$(document).on('transitionend', function(event) { ... }，那只有鼠标可以有效防止过渡完成。

资源

我在我的.sidebar-trigger上放了一个蓝色的背景，并制作了一个小视频/gif，以便更清晰。

即使使用自然手势，我也像疯狂的生物一样移动了鼠标，但问题仍然存在。

我正在使用Semantic-UI关于这个问题的指南：http://semantic-ui.com/modules/sidebar.html#/settings（我也尝试了onVisible和onHide，但没有运气）

这是运行Chrome 45.0.2454.101（64位）的OSX Yosemite 10.10.3

带有问题的jsfiddle

PS：似乎这可能是OSX Chrome的错误？

- Neithan Max

---

http://jsfiddle.net/1amus8q9/16/ 这是你要找的吗？ - Fiido93

不行:( 在你的电脑上能工作吗？我的意思是，在展开过程中移动鼠标......如果我这样做，按钮直到我停止鼠标才会起作用。同样的问题。我认为这是OSX Chrome的一个bug，我需要找到另一种实现同样效果的方法。有什么高效的想法吗？ - Neithan Max

我相信这可能是你需要的：http://jsfiddle.net/g8xbcm0u/。下面有详细信息。 - deebs

Answer 1

我建议尝试使用one和mouseover：

$('.sidebar-trigger').one('mouseover', function() {
    $('.ui.sidebar').sidebar('show')
});

然后，在它完成动画后，重新附加事件：

 $(document).on('transitionend', function(event) { 
     $('.sidebar-trigger').one('mouseover', function() {
        $('.ui.sidebar').sidebar('show')
     });
 });

我认为发生的情况是，当鼠标移动到元素上方并经过子元素后返回悬停元素时，悬停事件将被多次调用，这会导致某些混乱。因此，您需要仅在未显示时调用 show。

- dave

---

我之前不知道one()，谢谢你。但是还是没成功，仍然出现同样的情况……我不认为事件被多次调用了；一开始我很担心这种情况，所以我把所有的转换情况都输出到控制台，但是我并没有看到任何像洪水一样的东西。 - Neithan Max

我试过了xD，我把所有东西都设置好了，但是semantic.js无法工作，尽管我没有看到任何错误：http://jsfiddle.net/1amus8q9/5/ - Neithan Max

Fiddle在最新的Chrome和Firefox Linux上运行良好。 - kursus

不是OSX Chrome的错误。我已经尝试了很多次在你的fiddle中复制你的问题，但我无法复制。它按预期工作。 - Patrick Lyver

Answer 2

这里是一个可工作的示例：Fiddle

我相信当鼠标悬停在元素上时，它会添加类'uncover'和'visible'，还有另一个叫做'animating'的类，直到鼠标停止移动才会触发。我稍微修改了jQuery代码，仅添加类'uncover'和'visible'，但它仍然可以正常运行动画。然而，页面向右推出了175像素，所以我不得不将引起此问题的样式类（如下所述）从260px修改为85px。从我的理解来看，这确实使菜单正常工作。

$('.sidebar-trigger').mouseenter(function() {
    $('.ui.sidebar').addClass('uncover, visible');
    $('body').addClass('mleft175');
});

$('body').click(function() {
    $('.ui.sidebar').removeClass('uncover, visible');
    $('body').removeClass('mleft175');
});

然后添加覆盖类

.ui.visible.left.sidebar ~ .pusher 
{
-webkit-transform: translate3d(85px, 0, 0);
    transform: translate3d(85px, 0, 0);
}

现在它被设置为在单击页面主体时隐藏菜单。或者，您可以在鼠标离开侧边栏菜单时隐藏它：

$('.ui.sidebar').mouseleave(function(){
    $(this).removeClass('uncover, visible')
});

- deebs

---

这个工作效果好多了，但是用户体验还有些不舒适。这是我在我的站点上经历的情况：http://i.imgur.com/5kdfstG.gif 我希望我可以从中工作。如果没有更多的答案/改进，我会将其标记为正确答案。 - Neithan Max

Answer 3

好的，我的第一个答案（当然）为它实际上需要做的事情太多了。onVisible 似乎完美地工作了。你那边不起作用吗？演示在这里

只需在侧边栏设置中将 'onShow' 更改为 'onVisible'：

    $('.ui.sidebar').sidebar('setting', {
        onVisible: function() {
            $('.sidebar-trigger').hide();
        },
        onHidden: function() {
            $('.sidebar-trigger').show();
        }
    });

如Semantic UI网站所示，当动画开始时，onVisible将被触发。当动画完成时，onShow将被触发。因此，您之前所做的是在动画最终完成时隐藏了那个蓝色/透明的条（在我之前的答案中注明的.animating类），而不是在它开始时。如果需要进一步解释，请告诉我。

- deebs