您如何使透明元素不可交互

Question

我正在显示和隐藏元素，并以淡出/淡出的效果淡出。

CSS

.element {
   opacity: 1.0;
   transition: opacity 0.3s linear;
}
.element.hidden {
   opacity: 0.0;
}

JS

// hide
$('someElement').addClassName('hidden');
// show
$('someElement').removeClassName('hidden');

问题在于，隐形元素仍然占据空间。如果用户试图单击其下方的某些内容，则该隐形元素截断了点击，用户会感到困惑。是否有CSS属性使元素不可交互？我知道有一些黑客类似.hidden类中的top:-999em，但是我问您是否知道任何优雅的解决方案。

Answer 1

您还需要过渡visibility：

.element {
   opacity: 1.0;
   visibility: visible;
   transition: opacity 0.3s linear, visibility 0.3s linear;
}
.element.hidden {
   opacity: 0.0;
   visibility: hidden;
}

可以单击具有visibility: hidden的元素；即，它不会拦截单击。

如果您需要该元素完全消失而不是继续占据空间，则需要使用display: none，但这不是动画属性，因此您会看到该元素突然消失而不是淡出。