CSS transition for movement after the above element display: none

Question

The suggested duplicated don't have a solution for this problem and don't hurry to close it. I'm a CSS expert.

I have 2 elements having the same parent and when the first element disappears with display: none, the second element moves to the top, taking place of the first one. Is there a transition that can be added for the movement of the second element?

See the sinppet below. Click on the red block to make it disappear and then click on the green one to show it back.

document.querySelector(".first").onclick = function(event) {
  this.style.display = "none";
}

document.querySelector(".second").onclick = function(event) { document.querySelector(".first").removeAttribute("style")
}

.first {
    background: red;
    height : 250px;
}

.second {
  background : green;
  height : 250px;
}

<div>
  <div class="first">My element</div>
  <div class="second">Another element</div>
</div>

Yes, you can use `max-height`, `max-width`, and other stuff. It depends on how you want the transition to look like — Christian Vincenzo Traina, Jun 20 '22 at 15:03
It better works with animation height but is there a way to put the @keyframes from value through Javascript? — Marian07, Jun 20 '22 at 15:06
This would be a JavaScript solution : https://stackoverflow.com/a/39141354/3102325 — Marian07, Jun 20 '22 at 15:07
It's a combination of animation height through JavaScript and setting the @keyframe from value after getting it from clientHeight — Marian07, Jun 20 '22 at 15:08
Don't repost the same question once it has been closed. [edit] the existing question to explain why it either not a duplicate or why you feel your issue is differnt. — Paulie_D, Jun 20 '22 at 15:34
"The suggested duplicated don't have a solution for this problem"—the _accepted_ duplicate is your own previous identical question. Please read [How do I get attention for one of my own questions without a good answer?](https://meta.stackexchange.com/q/7046/248627), making particular note of this: "**Do not post your question a second time,** as it will be closed as a duplicate of your first question, and may attract downvotes. Also, **do not delete your question and re-ask it,** as your previous question will be undeleted and your new one closed as a duplicate." — ChrisGPT was on strike, Jun 21 '22 at 00:55

score 1 · Answer 1 · answered Jun 20 '22 at 15:08

Since your div has a static height, you can add a transition on the CSS height property:

document.querySelector(".first").onclick = function(event) {
  this.classList = "first collapsed";
}

document.querySelector(".second").onclick = function(event) {
  document.querySelector(".first").classList = "first";
}

.first {
    background: red;
    height : 250px;
}

.second {
  background : green;
  height : 250px;
}

.collapsed {
  height: 0;
  transition: height ease-in-out 500ms;
  overflow: hidden;
}

<div>
  <div class="first">My element</div>
  <div class="second">Another element</div>
</div>

Youssouf Oumar · Answer 2 · 2022-06-20T15:34:08.403

You can animate the height for 1s for example, and then set display:none with setTimeout. That's because you cannot animate display property. That would be handy if you need that display:none, for some reasons.

let first = document.querySelector(".first");
first.onclick = function (event) {
  this.classList.add("hide");
  setTimeout(() => {
    this.style.display = "none";
  }, 1000);
};

document.querySelector(".second").onclick = function (event) {
  first.style.display = "block";
  setTimeout(() => {
    first.classList.remove("hide");
  }, 1);
};

.first {
    background: red;
    height : 250px;
    overflow:hidden;
    transition:1s;
}

.first.hide{
  height:0;
}


.second {
  background : green;
  height : 250px;
}

<div>
  <div class="first">My element</div>
  <div class="second">Another element</div>
</div>

score 1 · Answer 3 · answered Jun 20 '22 at 15:13

basically the same answer as the first answer above but using max-height you get the transition/animation in both directions

document.querySelector(".first").onclick = function(event) {
  this.style.maxHeight = 0;
}

document.querySelector(".second").onclick = function(event) { document.querySelector(".first").removeAttribute("style")
}

.first {
    background: red;
    height: 250px;
    max-height : 250px;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.second {
  background : green;
  height : 250px;
}

<div>
  <div class="first">My element</div>
  <div class="second">Another element</div>
</div>

CSS transition for movement after the above element display: none

3 Answers3