Transitionend事件在更宽的分辨率屏幕上过早地触发100%宽度?

时间:2018-03-27 14:05:22

标签: jquery css transition transitionend

当编辑器打开时,我稍微缩小了我的调度程序,然后当编辑器关闭时,我将调度程序滑回到100%宽度并且必须进行调整大小,以便事件全部转到新的正确位置。

问题是,在更广泛的屏幕上,过渡事件似乎过早发生。我在附加到调度程序的transitionend end事件中设置了一个断点,当调度程序仍然有办法进行转换时,它进入了断点:

enter image description here

当我按下继续时,文本是调度程序仍将填满的区域,因此转换肯定没有完成......但是事件被触发了。

我附上$(scheduler.element).one('transitionend', function(){//resize stuff});

然后将宽度设置为100%,并在更宽的屏幕上执行此操作。我在1920px宽度上注意到了这一点。

为什么在转换实际结束之前,此转换会在更宽的屏幕上触发?我怎么能阻止它?

1 个答案:

答案 0 :(得分:0)

我终于找到一篇关于SO的文章,让我朝着正确的方向前进。经过长时间的搜索后,我总是找到我需要的东西,最后在SO上问一个问题:P。

无论如何,事实证明,即使我只将它绑定到宽度,转发事件也会触发多个转换端,它也会触发一个或两个转换端(不是我做的,它可能是Kendo所做的事情)他们的文件。

所以,不得不将.one更改为.on(所以N.Ivanov在我的OP评论中提出了正确的想法)。但是,我必须检查propertyName并监听width transitionend。

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

然后,一旦我获得了宽度过渡,我删除它,因为我仍然需要.one行为。