鼠标移动块'transitionend'答案

【问题标题】：Mouse movement blocks 'transitionend'鼠标移动块'transitionend'
【发布时间】：2015-11-22 10:40:16
【问题描述】：

简介

我正在使用 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 with the problem at hand

PS：好像it might be an OSX Chrome bug?

【问题讨论】：

jsfiddle.net/1amus8q9/16这是您要找的吗？
不：（它在你的机器上工作吗？我的意思是，在鼠标展开时移动鼠标......如果我这样做，按钮在我停止鼠标之前不起作用。同样的问题。我认为这是一个 OSX Chrome 错误，我必须找到另一种方法来达到相同的效果。有效的想法？
我相信这可能是您需要的：jsfiddle.net/g8xbcm0u 答案在下面，并附有详细信息。

标签： javascript jquery html css

【解决方案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 如果它还没有显示。

【讨论】：

我不知道 one()，所以谢谢。但是仍然没有运气，同样的事情正在发生……我认为该事件不会被多次调用；一开始我很害怕，所以我将所有转换都转储到控制台，但我没有看到任何类似洪水的东西
我正在尝试 xD 我设置了它，但我无法让语义.js 工作，即使我没有看到任何错误：jsfiddle.net/1amus8q9/5
Fiddle 在最新的 Chrome 和 Firefox Linux 上运行良好。
没有 OSX Chrome 错误。我已经尝试了很多次在你的小提琴中复制你的问题，但我做不到。按预期工作。

【解决方案2】：

这是一个工作示例：Fiddle

我相信当元素悬停时，它会添加一个类“发现”和“可见”，另一个称为“动画”，直到鼠标停止移动才会触发。我将 jQuery 稍微更改为 only 添加类 'uncover' 和 'visible'，它仍然可以动画。然而，身体被推得太远了 175px，所以我不得不将导致它的类（如下所述）从 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')
});

【讨论】：

这工作得更好，但仍有一些不舒服的用户体验。这就是我在我的电台所经历的：i.imgur.com/5kdfstG.gif 我希望我可以以此为基础工作。如果没有进一步的答案/改进，我会将其标记为正确答案

【解决方案3】：

好的，我的第一个答案是（当然）对于它真正需要的东西来说工作量太大了。 onVisible 似乎工作得很好。那不适合你吗？演示HERE

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

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

如Semantic UI site 所示，onVisible 在动画开始时触发。 onShow 在动画完成时触发。所以你所做的是在动画最终完成时隐藏那个蓝色/透明条（我之前的回答中提到的 .animating 类），而不是它开始的时候。如果您需要进一步解释，请告诉我。

【讨论】：