How to add a transition when styling display?

Question

I have a program, where I use JavaScript to make one div appear and another disappear when I click something:

<div id="first" class="active"> some content here </div>
<div id="second" class="inactive"> some content here </div>

<button onclick="change()"> button </button>

function change(){
document.getElementById("first").className="inactive";
document.getElementById("second").className="active"
}

.active{ display: block; }
.inactive{display: none; }

I'd like to make it so that one div fades in while the other fades out.

I've tried transition: ease 1s;, transition: display 1s and using a custom transition, however none of them have worked.

Try clicking the different buttons on this Carrd - the words fade in and out. I'm going for that effect here.

I'd prefer a solution using only HTML, CSS and/or JavaScript -- trying to keep this project simple.

Spectric · Accepted Answer · 2021-07-08T00:51:49.170

2

Use opacity:

function change() {
  document.getElementById("first").className = "inactive";
  document.getElementById("second").className = "active"
}

.active{
  opacity:1;
}
.inactive{
  opacity:0;
}
div{
  transition:opacity 1s;
}

<div id="first" class="active"> some content here </div>
<div id="second" class="inactive"> some content here </div>

<button onclick="change()"> button </button>

To prevent the hidden element from taking up space, use:

function change() {
  const f1 = document.getElementById("first");
  f1.style.opacity = "0";
  setTimeout(() => {
    f1.style.display = "none"
    const f2 = document.getElementById("second");
    f2.style.display = "block";
    setTimeout(() => {
      f2.style.opacity = "1";
    }, 50);
  }, 1000);
}

.active {
  display: block;
  opacity: 1;
}

.inactive {
  display: none;
  opacity: 0;
}

div {
  transition: opacity 1s;
}

<div id="first" class="active"> some content here </div>
<div id="second" class="inactive"> some content here </div>

<button onclick="change()"> button </button>

edited Jul 08 '21 at 00:51

answered Jul 08 '21 at 00:43

Spectric

27,594
6
14
39

The only problem with this solution is that the divs with `opacity: 0` still take up space -- something that I'm trying to avoid. Any workaround for this? Thanks! – cm0973 Jul 08 '21 at 00:46
@cm0973 No problem. I'll edit my answer. – Spectric Jul 08 '21 at 00:48
I found an answer on a different post. Thanks for the help anyway! – cm0973 Jul 08 '21 at 00:52
1

I will, but it says I need to wait 3 minutes (probably because it was marked as a duplicate). – cm0973 Jul 08 '21 at 00:53
I have an additional question: what's the point of the classes if you're not changing them with JavaScript anymore? Or is it just to set a "starting" look? – cm0973 Jul 08 '21 at 01:19
@cm0973 Yes - it's for the 'starting' look – Spectric Jul 08 '21 at 01:36

How to add a transition when styling display?

1 Answers1