How to make a flex-box container smoothly resize when items are not rendered?

Question

I want to create a transition for an auto height in a flex-box container. I have a user bar with name, points, status and alert.

The alert message sometimes is rendered sometimes is not. It uses a display: none What I'm trying to achieve is to resize smoothly the height of the flex-box container with a transition when I click on the alert message.

Here is a basic example (not working)

const $user_alert = document.querySelector('user-alert')

$user_alert.onclick = () => {
    $user_alert.classList.add('hide')
  setTimeout(() => $user_alert.classList.remove('hide'), 1e3)
}

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: aliceblue;
}

user-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 2s ease-in-out;
}

user-alert {
  cursor: pointer;
  color: red;
}

.hide {
  display: none;
}

<user-bar>
  <user-name>Albert Einstein</user-name>
  <user-points>10000</user-points>
  <user-status>on</user-status>
  <user-alert>Time to Party Hard</user-alert>
</user-bar>

I cannot figure out how to create a simple transition without defining heights for each element inside the user bar... maybe it's not possible using display: none.

Any help or idea will be really appreciate!

Does this answer your question? [CSS Opacity transition with display: none](https://stackoverflow.com/questions/64000697/css-opacity-transition-with-display-none) — disinfor, Jan 11 '21 at 20:58
There will be no need for animation, just replace `display: none;` or `.hide` class to ` visibility: hidden;`. This might help: https://codepen.io/manaskhandelwal1/pen/zYKJbPq — Manas Khandelwal, Jan 11 '21 at 21:26
Manas, that's an alternative, thanks. I would like to avoid keeping the space of the user alert message. — Johnny Johnny, Jan 11 '21 at 21:30
disinfor, that answer is focus on the element that has `display: none`, thanks but I would like to resize container's height smoothly, independently of its items transitions or maybe cannot go independently. — Johnny Johnny, Jan 11 '21 at 21:35

score 1 · Answer 1 · answered Jan 12 '21 at 15:46

1

Change dispaly: none to transform: scale(0)
In addition to display: flex add transform: scale(1) Let us know if that worked!

answered Jan 12 '21 at 15:46

YTG

956
2
6
19

Thank you so much, great answer but I'm not allow to change `display: none` in that component – Johnny Johnny Jan 14 '21 at 16:04
Vote up for a grate answer:) – YTG Jan 14 '21 at 16:06
no problem with that but could you help me? keeping the `display: none` – Johnny Johnny Jan 14 '21 at 16:35
You cannot have transition on a boolean property. See here https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property – YTG Jan 14 '21 at 16:41

How to make a flex-box container smoothly resize when items are not rendered?

1 Answers1