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 に答える