过渡结束不触发
Transition end does not fire
我想用动画隐藏和显示方法创建模态 window,我希望它能与 CSS 过渡一起使用。
我创建了原型 https://jsfiddle.net/7bkvcvqq/and 一切看起来都很好,但是当我点击快速按钮时立即触发显示和隐藏时,事件转换结束不会触发并且模式 window 仍在页面上。您可以检查一下,只需单击“快速”按钮后尝试通过鼠标 select 页面上的一些文本。
var modal = (function () {
var $modal = $('.modal'),
openClass = 'modal_open',
hide,
show;
hide = function () {
// force a redraw/repaint
$modal.height();
$modal.removeClass(openClass);
};
show = function () {
$modal.show();
// force a redraw/repaint
$modal.height();
$modal.addClass(openClass);
};
$(document).on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function (e) {
if ($modal.is(e.target) && !$modal.hasClass(openClass)) {
$modal.hide();
}
});
return {
hide: hide,
show: show
}
}());
在实际代码中,当我将此逻辑用于预加载器时,可能会发生这种情况。我发现的一种解决方案是在隐藏功能中使用 setTimeout,但在不同的计算机中,setTimeout 的延迟不同。也许这取决于 CPU,我不知道。
为什么它是黑的,如何预防?
过渡应该在具有过渡的元素中 属性:
$('.modal').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function (e) {
查看更多信息
https://developer.mozilla.org/en-US/docs/Web/Events/transitionend
据我了解,transitionend 仅在所有动画时间结束时触发。所以这就是为什么当我点击 'Slow' 按钮模式等待它完全出现然后隐藏一切都很好。
我想用动画隐藏和显示方法创建模态 window,我希望它能与 CSS 过渡一起使用。
我创建了原型 https://jsfiddle.net/7bkvcvqq/and 一切看起来都很好,但是当我点击快速按钮时立即触发显示和隐藏时,事件转换结束不会触发并且模式 window 仍在页面上。您可以检查一下,只需单击“快速”按钮后尝试通过鼠标 select 页面上的一些文本。
var modal = (function () {
var $modal = $('.modal'),
openClass = 'modal_open',
hide,
show;
hide = function () {
// force a redraw/repaint
$modal.height();
$modal.removeClass(openClass);
};
show = function () {
$modal.show();
// force a redraw/repaint
$modal.height();
$modal.addClass(openClass);
};
$(document).on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function (e) {
if ($modal.is(e.target) && !$modal.hasClass(openClass)) {
$modal.hide();
}
});
return {
hide: hide,
show: show
}
}());
在实际代码中,当我将此逻辑用于预加载器时,可能会发生这种情况。我发现的一种解决方案是在隐藏功能中使用 setTimeout,但在不同的计算机中,setTimeout 的延迟不同。也许这取决于 CPU,我不知道。
为什么它是黑的,如何预防?
过渡应该在具有过渡的元素中 属性:
$('.modal').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function (e) {
查看更多信息
https://developer.mozilla.org/en-US/docs/Web/Events/transitionend
据我了解,transitionend 仅在所有动画时间结束时触发。所以这就是为什么当我点击 'Slow' 按钮模式等待它完全出现然后隐藏一切都很好。