Add transition animation for elements with uncertain height

Sometimes we encounter this situation where the container is stretched by elements and its height cannot be known, but a smooth transition is required. Like this:

Try touching my head with your mouse

I am the content
I am the content
I am the content
I am the content

I believe that CSS beginners have tried this:

1
2
3
4
5
6
7
8


.cont{
height:0;//The initial height is zero
transition: .3s;
}
.cont:hover{
height:auto;//The height is automatic when the mouse is touched
transition: .3s;//Set 0.3 seconds transition
}

Then I got a cold shoulder. The height does change when the mouse is touched, but the transition does not take effect. This is because transition can only handle transitions between values, and changes between auto - 0 cannot be transitioned.

Now this transition can be achieved through the calc-size attribute. For details, please see this post, but the compatibility is not very good at present.

So what can we do? At this time, we need to bring out our display: grid. The grid layout can control the width-to-height ratio of its internal container through the fr unit. That’s a coincidence, folks. We just need to change the height ratio between 1 and 0, right?

Below is the code for the head-touching expansion example above:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


<div class="cont">
    <div class="head">I will form the head</div>
    <div class="body">
        I am the content</br>
        I am the content</br>
        I am the content</br>
        I am the content</br>
    </div>
</div>

    <style>
        .cont{
            display:grid;//Set grid layout
        background:#99e6ff;
            color:#006080;
            grid-template-rows: 30px 0fr;//Distribute height: head:30px, body:0%
        border-radius:8px;
            transition: .3s;
            padding:10px;
            line-height:30px;
        }
        .cont:hover{
            grid-template-rows: 30px 1fr;//Distribute height: head:30px, body:100%
        transition: .3s;//Set 0.3 seconds transition
        }
        .body{
            min-height: 0;//Set the minimum height, otherwise the text can still stretch the container.
        overflow:hidden;//Set overflow hidden, otherwise the container will be folded and the text will still be there.
        }
    </style>

The effect is completed in a simple way. The knowledge about grid layout cannot be explained in a few words. Students who are interested can learn it.

Reference to this article

How to make CSS auto height perfectly support transition animation?