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

Question

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

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

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

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

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

为什么这个 transitionend 在转换实际完成之前就在更宽的屏幕上触发？我该如何防止这种情况发生？

Answer 1

我终于在 SO 上找到了一个 post，它让我找到了正确的方向。我总是在花了很长时间搜索并最终在 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);
    }
});

然后，一旦我得到宽度 transitionend，我将其删除，因为我仍然需要 .one 行为。

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

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

jquery

css

transition

transitionend