Question

I’m showing and hiding elements with a fade in / fade out effect.

CSS

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

.element.hidden {
   opacity: 0.0;
}

JS

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

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

The problem with this is that an invisible element still occupies space. If the user tries to click something beneath it, this invisible element intercepts the click and the user gets confused. Is there a CSS property that will make the element non-interactable? I’m aware there are some hacks like setting top:-999em in the .hidden class, but I’m asking if you know any elegant solutions.

Answer 1

You will need to transition visibility as well:

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

.element.hidden {
   opacity: 0.0;
   visibility: hidden;
}

An element with visibility: hidden can be clicked through; i.e. it won’t intercept the click.

If you need the element to disappear altogether rather than continue to occupy space, you need to use display: none instead, but that is not an animatable property so you’ll see the element disappear abruptly rather than fade out.