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

Question

我正在尝试禁用每个操作，直到手动触发的转换完成。

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

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

然后......

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

我正在寻找的是一种禁用所有活动的方法，可以点击，触摸，任何内容，直到动画结束。有什么想法吗？

Answer 1

如果通过＆＃34;手动触发所有操作＆＃34;你的意思是点击，然后应用＆＃34;指针事件：无＆＃34;对于所有绘制的元素应该是工作。

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;
}

Answer 2

dropdownMenusUl.on('transitionstart', function() {
        jQuery(this).css('pointer-events', 'none');
});

dropdownMenusUl.on('transitionend', function() {
        jQuery(this).css('pointer-events', 'all');
});