0

当编辑器打开时，我稍微缩小我的调度器，然后当编辑器关闭时，我将调度器滑回 100% 宽度并且必须调整大小，以便所有事件都转到它们新的正确位置。

问题是，在更宽的屏幕上，transitionend 事件似乎过早触发。我在附加到调度程序的 transitionend 结束事件中设置了一个断点，当调度程序仍有办法进行转换时，它进入了断点：

在此处输入图像描述

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

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

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

为什么在过渡实际完成之前这个过渡端会在更宽的屏幕上触发？我该如何防止呢？

4

1 回答 1

0

我终于在 SO 上找到了一个帖子，让我朝着正确的方向前进。在花了很长时间搜索并最终在 SO :P 上提出问题后，我总是最终找到我需要的东西。

无论如何，结果transitionend事件会在多个transitionends上触发，即使我只将它绑定到宽度，它也会触发一个颜色或两个transitionends（不是我做的，这可能是Kendo在他们的文件中做的事情。

因此，必须将 .one 更改为 .on （因此 N. Ivanov 在我的 OP 评论中提出了正确的想法）。但是，我必须检查 propertyName 并监听宽度 transitionend。

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

然后，一旦我得到了 width transitionend，我就删除了它，因为我仍然需要 .one 行为。

于 2018-03-27T14:57:29.577 回答