Transitionend event firing prematurely for 100% width on wider resolution screens?

Question

I shrink my scheduler slightly when the editor opens, then when the editor closes, I slide the scheduler back to 100% width and have to do a resize so the events all go to their new correct positions.

The issue is, that on wider screens, the transitionend event seems to fire prematurely. I put a break point in the transitionend end event I attached to the scheduler, and it entered the break point when the scheduler still had a ways to go on its transition:

The text is the area that the scheduler will still fill up when I press continue, so the transition is definitely NOT finished...... yet the event fired.

I attach a $(scheduler.element).one('transitionend', function(){//resize stuff});

then set the width to 100%, and it does this on wider screens. I noticed this on 1920px width.

Why is this transitionend firing on wider screens before the transition actually finishes? And how might I prevent that?

Answer 1

I finally found a post on SO that got me in the right direction. I always end up finding the stuff I need after spending a long time searching and finally asking a question on SO :P.

Anyway, it turns out the transitionend event would fire on multiple transitionends, even though I had only bound it to width, it would fire a color or two transitionends as well (not my doing, it may be something Kendo is doing in their files.

So, had to change the .one to .on (So N. Ivanov was on to the right idea in the comments on my OP). But, I had to check for the propertyName and listen for the width transitionend.

$(scheduler.element[0]).on(transitionEndName, function(e){
    if(e.originalEvent.propertyName == 'width'){
        $(window).trigger('resize');
        scheduler.resize(true);
        scheduler.element.off(transitionEndName);
    }
});

Then, once I got the width transitionend, I removed it because I did still need the .one behavior.