CSS实现高度变化的过渡效果（定高、不定高）

一、定高（高度已知且固定）

可直接使用height 和 transition 属性实现

div {
    height: 0px;
    transition: height .3s ease;
    overflow: hidden;
    &.is-show {
        height: 200px;
    }
}

二、不定高（元素高度未知）

元素不定高时，将高度设置为auto 是不会触发 transition过渡动画的。

1、巧用 max-height 实现过渡效果

div {
    max-height: 0;
    transition: 1s;
    &.is-show {
        max-height: 800px;
    }
}

使用max-height 时，元素高度前后差异越大，过渡效果越是不理想。

2、利用grid布局

grid布局的fr单位，用于定义网格轨道大小的弹性系数。

可通过grid-template-columns 和 gird-template-rows 实现元素宽高的过渡。

// 高度过渡
div {
    display: grid;
    grid-template-rows: 0fr;
    transition: .3s;
    
    &.is-show {
        grid-template-rows: 1fr;
    }
}

设置为0fr后高度未变化 ？

grid布局设置为0fr 时，若内部有文本内容时，最小高度为min-content, 没有文本内容时0fr才不占空间。

子元素设置min-height:0可实现正常过渡效果

div {
    display: grid;
    grid-template-rows: 0fr;
    transition: .3s;
    > div{
     	min-height: 0;
    }
    &.is-show {
        grid-template-rows: 1fr;
    }
}