0

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:

enter image description here

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?

Tyler Dahle
  • 817
  • 1
  • 8
  • 37
  • you have a mistake in you jquery code `$(scheduler.element).one` it should be `.on` not `.one`. – N. Ivanov Mar 27 '18 at 14:07
  • No, I bind the .one every time, so it always goes. There is reason for it, I need it to only do it once when I directly specify, so I use the .one. So that isn't the issue, the issue is still that transitionend fires before it should. – Tyler Dahle Mar 27 '18 at 14:09
  • do you have everything wrapped in a document ready function (e.g. `$(function(){ //code here })`)? – N. Ivanov Mar 27 '18 at 14:11
  • Yes, all my instantiations of things occur in a document ready function. This transitionend binding occurs in the 'edit' event of the Kendo Scheduler. – Tyler Dahle Mar 27 '18 at 14:12
  • 1
    Posted an answer that I found @N.Ivanov You were actually correct that I needed .on instead of .one, but this was due to multiple transitionends being fired and my resizing occurring on the wrong one. – Tyler Dahle Mar 27 '18 at 14:59

1 Answers1

0

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.

Tyler Dahle
  • 817
  • 1
  • 8
  • 37