jquery - 有没有办法在 css 转换发生时阻止所有操作？

Question

我试图禁用所有操作，直到手动触发的转换完成。

我正在使用这个简单的代码:

myelem.click(function() {
   myotherelem.addClass('transition');
};

然后……

myelem.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
   // I am done!
});

我正在寻找一种方法来禁用所有事件，无论是单击、触摸还是任何操作，直到动画结束。有什么想法吗？

Answer 1

如果“手动触发的所有操作”是指点击，那么将“指针事件:无”应用于所有绘制的元素应该可以完成工作。

JS:

myelem.click(function() {
    myotherelem.addClass('transition');
    body.addClass('freeze');
};

myelem.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
    // I am done!
    body.removeClass('freeze')
});

CSS:

.freeze {
   pointer-events:none;
}