div{
height: 0;
transition: 1s
}
.wrap:hover div{
height: auto
}
说到网页设计里的内容展开和折叠，大家是不是觉得动作死板生硬？并不然，只要把它们的高宽设为auto，动画效果就能自动出来！现在我来分享个实用小妙招，让你快速搞定动画过渡！
JS动态获取元素高度的局限性
div{
max-height: 0;
transition: 1s
}
.wrap :hover div{
max-height: 800px /*大概的值，需要超过元素高度*/
}
想要让物体蹦跶起来，就需要用JavaScript搞清楚每个对象的身高！这事儿挺烦人，有些时候你都搞定画面了却还在纳闷儿到底多高？这样的话编程效率就低了，速度也慢下来咯。
CSS中利用max-height解决动态高度过渡问题
其实，要找网页元素大小也不难，除了编程，用CSS里的max-height属性也很轻松搞定的！只要给个大概数值再加上点儿过渡动画，元素就能像翻阅书本那样一页页出现啦～不过要是差别太大的话可能就达不到效果。
1fr 1fr 1fr
全新方式：利用grid布局中的fr单位实现动态高度过渡
.grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
跟你们说，CSS里面有个叫”grid”的神奇玩意儿，搞好”fr”单位就可以搞掂网格大小调节。但别小看这个fr，除了自动分配位置，还能让画面自然过渡！
探究fr单位在grid布局中的应用
.grid{
grid-template-rows: repeat(3, 1fr);
}
用fr单位划分grid简直太简单了！比如repeat(3, 1fr)，这招就能轻松搞定空间布局和比例分配！而且非常全面，你想怎么调整都行。
特殊情况下0fr与1fr的关系
.grid{
grid-template-rows: 0fr 2fr 1fr;
}
看明白了么，这个时候咱们就赶紧把这比率换成0fr！咱们都懂，格子布局就是要小而精，别的就别想挤出来了。这么做就能轻轻松松藏个东西，或者随便你怎么设定最小大小，展示效果肯定酷毙！
利用grid布局中fr单位实现自适应高度动画
把元素统一放在0.1%的FR上，再加个字体效果，就能轻松搞定有弹性的网格排版咯~看，无论怎么放大缩小页面，颜色都不会乱跑，移动也不会卡顿！
两个实例演示自适应高度动画
记住，我给你们展示了两个简单步骤做出那种自动放大缩小效果的方法！想要随便改图片或者文字的大小，甚至是动态画面也是小菜一碟，只要搞懂HTML怎么设，css怎么改就行！
span{
min-height: 0
}
注意事项及优化建议
搞定Grid布局的fr单位做自适应高度动画要注意两点哈!第一点，0fr的话记得带上单位别跟calc弄混了;第二点，往上拉挺简单，但视觉效果也要舒服妥当才行噢～
.grid{
overflow: hidden;
}
span{
min-height: 0
}
总结与思考
来看看这个诀窍，教你怎么用CSS设置自动高度解决过渡动画的小麻烦！关键在于掌握Grid布局里的fr单位，它既方便调整大小又保证了过渡动画流畅自如。对于前端开发人员来说，学会这些技巧不仅提高用户体验，还能让你的网页焕然一新，颜值飙升！
.grid{
grid-template-rows: 1fr 2fr 1fr;
}
。
评论0