The question came from a comment on the Nuggets, where a friend asked, why is the height transition animation in my following code not working?

The pseudocode looks something like this:

{
    height: unset;
    transition: all 0.3 s linear;
    will-change: height;

    &.up {
        height: 0;
    }
    &.down {
        height: unset; }}Copy the code

Back to an actual Demo, it would look something like this (essentially the idea is to animate the element by switching its.up and.down classes) :

Uh huh? The height property is set to transition, but the transition animation is not triggered.

Here’s what we’re looking for:

Transition does not support height: Auto

When the above code is set to height: unset, it is essentially height: auto. The idea is that this code will support the dynamic height of the text in the container. Each time you expand, transition to the height of the container itself.

Looking at the specification, the reason is that CSS Transtion does not support element height changes to auto.

The animation works if the above height: unset is replaced with a specific height value, such as:

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

However, we also want to be able to achieve dynamic height transition conversion, is there no way?

Use opportunelymax-heightAdaptive dynamic height

Hey, hey, here’s a very interesting trick. Since height: Auto is not supported, we can take a different approach and use max-height to dynamically scale height.

Height: 0 = max-height: 0; height: auto = max-height: 1000px;

{
    max-height: 0;
    transition: max-height 0.3 s linear;

    &.up {
        max-height: 0;
    }
    &.down {
        max-height: 1000px; }}Copy the code

Let’s estimate the maximum height of the actual container. Here, 1000px only needs to be higher than the maximum height. However, it can not be set too high, the highest is close to the maximum height, we will talk about why later.

Since max-height only limits the maximum height of the text, if the actual height of the container does not reach the maximum height of the limit, it will not get higher.

CodePen Demo — the height property transition unwork

Small defects

The overall effect is very Nice, of course, there may be two minor flaws,

  1. If the actual scenariomax-heightNeed to be used and have other functions, then maybe this method will not meet the requirements
  2. Another disadvantage is that there is a visual lag, and the greater the difference from the actual height, the more obvious it becomes. That is, if the actual height of the container is only 200px,max-heightIs 1000px, the animation time is 1s, and the easing function is Linear. The actual animation takes only 0.2 seconds to transition from 0 to 200px

Because the animation was supposed to stretch the height of the container for 1s to 1000px, it stopped at 200px, so the animation time was only 0.2 seconds. To sum up, the method is a good method, but specific analysis is needed when using it.

The last

Well, a small detail, I hope to help you, this article is over, I hope to help you :), want to Get the most interesting CSS information, do not miss my public number – iCSS front-end interesting news

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.