0

我正在显示和隐藏具有淡入/淡出效果的元素。

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 属性会使元素不可交互?我知道有一些技巧,比如top:-999em.hidden课堂上设置,但我问你是否知道任何优雅的解决方案。

4

1 回答 1

4

您还需要过渡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,但这不是动画属性,因此您会看到元素突然消失而不是淡出。

于 2012-11-05T20:00:52.363 回答