Combine display block with opacity fade in (bootstrap tabs)?

Question

I have elements with 2 classes (fade and hidden)

<div id="example" class="fade hidden"></div>

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.hidden {display: none;}

When clicked, a class gets added (.in and .shown)

.fade.in {
    opacity: 1;
}

.shown {display: block !important;}

My issue is, by doing the display: block, there is no animation with opacity. Just the element showing in full.

Anyway to keep the animation fade with opacity?

@FridayAmeh Because opacity won't hide the margins and padding, so the elements still take up space in the browser. — user1702965, May 28 '18 at 19:26
Possible duplicate of [Transitions on the display: property](https://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — Anonymous, May 28 '18 at 19:34
@tavkomann That answer won't work because visibility: hidden; won't work for my situation. — user1702965, May 28 '18 at 19:38
Second answer does not use `visibility: hidden` but `opacity` and `height`. — Anonymous, May 28 '18 at 19:39
@tavkomann Still doesn't work. Using height doesn't get rid of spacing that margins take up on the page. — user1702965, May 28 '18 at 20:44

score 1 · Answer 1 · answered May 29 '18 at 16:25

Instead of using display, one could use position: absolute. See the following example:

.fade {
  opacity: 0;
  transition: opacity 1s linear;
}

.hidden {
  position: absolute;
  pointer-events: none;
}

.fade.in {
  opacity: 1;
}

<button onclick="document.getElementById('example').className = 'fade in';">Click</button>
<div id="example" class="fade hidden">Example</div>
<p>Text...</p>

Combine display block with opacity fade in (bootstrap tabs)?

1 Answers1