CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Neithan Max
Neithan Max

Reputation: 11796

Mouse movement blocks 'transitionend'

Introduction

I'm using Semantic-UI's sidebar functionality, which gives you a button that triggers a sidebar that pushes the content from the left (in this case).

I want to unfold that same sidebar by hovering with the mouse on the left side. I realize there are several ways to do it (as these often do. Maybe just checking the X position of the mouse would work but that's beside the point); I chose to create a transparent div on the left side and make its :hover pseudo-class to trigger the sidebar:

// 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();
    }
});

Problem

Now, it all works except for one occasion: when you don't stop moving the mouse as the sidebar opens. I've looked at $(document).on('transitionend', function(event) { ... } and that mouse effectively prevents the transition to finish.

Resources

I've put a blue background on my .sidebar-trigger and made a small video/gif so as to be clearer.

video/gif

I moved the mouse like a crazy creature but with natural gestures the problem occurs as well.

I'm using Semantic-UI's guide on this thing: http://semantic-ui.com/modules/sidebar.html#/settings (I've also tried onVisible and onHide with no luck)

This is a OSX Yosemite 10.10.3 running Chrome 45.0.2454.101 (64-bit)

jsfiddle with the problem at hand

PS: It seems it might be an OSX Chrome bug?

Upvotes: 12

Views: 541

Answers (3)

deebs
deebs

Reputation: 1410

Ok, my first answer was (of course) way too much work for what it really needed. The onVisible seems to work perfectly. Was that not working for you? Demo HERE

Simply change 'onShow' to 'onVisible' in your sidebar setting: 

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

As shown on the Semantic UI site, the onVisible fires when the animating starts. The onShow fires when the animating finishes. So what you were doing was hiding that blue / transparent bar when the animation was finally done (the .animating class noted in my previous answer), as opposed to when it starts. If you need further explanation please let me know.

Upvotes: 0

deebs
deebs

Reputation: 1410

Here is a working example: Fiddle

I believe when the element was hovered, it was adding a classes 'uncover' and 'visible', and another called 'animating' which wouldn't fire until the mouse stopped moving. I changed the jQuery slightly to only add classes 'uncover' and 'visible', and it still animated okay. However, the body was pushing right too far by 175px, so I had to edit the class that was causing that (noted below) from 260px to 85px. This DOES get the menu acting properly though from my understanding.

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

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

and then add overriding class

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

Right now it is set to hide the menu when the body is clicked. Alternatively you can hide it when the mouse leaves the sidebar menu:

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

Upvotes: 0

dave
dave

Reputation: 64695

I would try using one and mouseover:

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

Then, when it has finished animating, reattach the event:

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

I think what is happening is that the hover event is getting called multiple times - every time the element is hovered, then goes over a child element, and then goes back over the hover element, and things are getting mixed up at some point. So you need to only call show if it's not already shown.

Upvotes: 8

Related Questions