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

问题描述：

我正在尝试禁用所有操作，直到完成手动触发的转换。有没有办法在css转换发生时阻止所有操作？

我用这简单的代码：

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

然后......

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

我所寻找的是一个方法来禁用所有的活动，无论是点击，触摸，任何事情直到动画结束。有任何想法吗？

注册要禁用在点击回调阻止默认行为，并不会传播行为的处理程序。如果这不起作用，请创建一个布尔标志，并在您的回调中进行检查并设置您的点击和动画回调。 – nietonfir

是的，你将不得不手动处理每一个事件，没有魔术命令会阻止所有的用户活动。另外，这不是我的业务，但我认为从用户体验的角度来看这很糟糕。 –

..我看不出这对任何人无法在任何地方点击0.3秒是如此糟糕。点击“关闭”按钮并让动画在完成后立即反转会更好吗？ – scooterlord

答

如果通过“手动触发所有动作”，您的意思是点击，然后对所有绘制的元素应用“指针事件：无”应该作业。

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

这是一个好主意..注意到，我会尝试它！ :) – scooterlord

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

相关推荐