鼠标移动块'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 bug？

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在尚未显示的情况下才需要调用.