Implementation of CSS dynamic height transition animation effect

This question originated from a message on Nuggets. A friend asked, why is the height transition animation of the following code invalid?

The pseudo code is probably like this:

{
    height: unset;
    transition: all 0.3s linear;
    will-change: height;
 
    &.up {
        height: 0;
    }
    &.down {
        height: unset;
    }
}

If we restore it to an actual demo, the effect is probably like this (the essential idea is to switch .up and .down classes of the element to make it expand and close):

uh-huh? It's very strange. I clearly set transition for height attribute, but why is the transition animation not triggered, but it is expanded directly in one step?

The effect we expect is as follows:

Transition does not support height: auto

When the above code is set to height: unset , it is actually equivalent to setting height: auto . Our idea is to hope that this code can support the dynamic height of the text container. Each time you expand it, just transition to the height of the container itself.

Looking at the specification, the reason is that CSS transition does not support changes in the element's height to auto.

If you replace the above height: unset with a specific height value, the animation will take effect, for example:

{
    &.up {
        height: 0;
    }
    &.down {
      - height: unset;
      + height: 500px;
    }
} 

However, we also hope to achieve dynamic height transition. Is there no other way?

Cleverly use max-height to adapt to dynamic height

Hey, here is a very interesting little trick. Since height: auto is not supported, we will find another way to use the max-height feature to achieve dynamic height expansion.

Let's modify the above code, replace height: 0 with max-height: 0 , and replace height: auto with max-height: 1000px . The pseudo code is probably like this:

{
    max-height: 0;
    transition: max-height 0.3s linear;
 
    &.up {
        max-height: 0;
    }
    &.down {
        max-height: 1000px;
    }
}

Let's estimate the maximum height of the actual container. 1000px here only needs to be higher than the maximum height. However, it cannot be set too high. The highest setting should be close to the maximum usage height. We will talk about why later.

Since max-height only limits the maximum height of the text, when the actual height of the container does not reach the maximum height limit, it will not continue to grow. Take a look at the effect:

CodePen Demo -- the height property transition unwork

Minor flaws

The overall effect is still very nice, of course, there may be two small flaws,

1. If max-height is needed in actual scenarios and has other functions, then this method may not meet the needs.
2. Another disadvantage is the visual delay, which becomes more obvious the greater the difference with the actual height. That is to say, if the actual height of the container is only 200px, max-height is 1000px, the animation time is 1s, and the easing function is linear. The actual animation transition time from 0 to 200px height is only 0.2s, which needs to be paid attention to.

Because the original expansion animation was expected to stretch the height of the container to 1000px in 1 second, but it actually stopped at 200px, so the animation time was only 0.2 seconds. To sum up, the method is a good one, but specific analysis is required when it is used.

This is the end of this article about the implementation of CSS dynamic height transition animation effect. For more related CSS height transition animation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!