- Change
dispaly: nonetotransform: scale(0) - In addition to
display: flexaddtransform: scale(1)
Let us know if that worked!
Solution 1 :
Problem :
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!
Comments
Comment posted by CSS Opacity transition with display: none
Does this answer your question?
Comment posted by codepen.io/manaskhandelwal1/pen/zYKJbPq
There will be no need for animation, just replace
Comment posted by Johnny Johnny
Manas, that’s an alternative, thanks. I would like to avoid keeping the space of the user alert message.
Comment posted by Johnny Johnny
disinfor, that answer is focus on the element that has
Comment posted by Johnny Johnny
Thank you so much, great answer but I’m not allow to change
Comment posted by YTG
Vote up for a grate answer:)
Comment posted by Johnny Johnny
no problem with that but could you help me? keeping the
Comment posted by stackoverflow.com/questions/3331353/…
You cannot have transition on a boolean property. See here