CSS animation of block height when going to 'height:auto'

Question

The animation works fine, the block smoothly changes height only if I specify an exact height value.

.main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(var(--main-color-rgb), .9);
    transition: var(--header-transition);
    display: flex;
}

.main.notActive {
    height: 80px;
}

when I want the height of the inactive state to depend on the content, the smoothness of the animation disappears.

.main.notActive {
    height: auto;
}

How can I fix this?

PS - a similar problem occurs with changing the value of 'display' and everything connected with it. For example, I can't change 'flex-direction' from 'column' to 'row' when transitioning. I'm losing fluidity. I think that these are close problems, so I added it here.

samran feli · Accepted Answer · 2023-07-17T13:42:37.530

0

you can use "min-height" with a great value for emulate this effect.

edited Jul 17 '23 at 13:42

answered Jul 17 '23 at 07:36

samran feli

86
5

This is not an answer, please read [answer] – Sfili_81 Jul 17 '23 at 08:14
1

Although the answer is not complete, it helped me. I understood what you need to think about in order to come to a decision. I used 'min-height' instead of 'min-height' and it worked. Thank you. – Игорь Мешалкин Jul 17 '23 at 09:26

CSS animation of block height when going to 'height:auto'

1 Answers1