改变高度,利用transition
过渡效果。
.box {
width: 300px;
height: 20px;
transition: height 0.3s;
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
}
.box:hover {
height: 300px;
}
<div class="box">
君不见黄河之水天上来,奔流到海不复回。
君不见高堂明镜悲白发,朝如青丝暮成雪。 人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。 烹羊宰牛且为乐,会须一饮三百杯。
岑夫子,丹丘生,将进酒,杯莫停。 与君歌一曲,请君为我倾耳听。
钟鼓馔玉不足贵,但愿长醉不愿醒。 古来圣贤皆寂寞,惟有饮者留其名。
陈王昔时宴平乐,斗酒十千恣欢谑。 主人何为言少钱,径须沽取对君酌。
五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。
</div>
效果如图
在日常开发中,我们往往需要从后台获取数据,此时我们不知道数据占据具体高度,也就是展开后的高度,此时将height
设置为auto
.box {
width: 300px;
height: 20px;
transition: height 0.3s;
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
}
.box:hover {
height: auto;
}
此时过渡效果transition
失去了作用
解决方法,用max-height
。
注意:这个高度尽可能比实际高度大一些,太大会导致动画过渡时间不匹配,太小会导致内容展示不完整。
.box {
width: 300px;
max-height: 20px;
transition: max-height 0.3s;
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
}
.box:hover {
max-height: 600px;
}