使用纯 CSS 实现元素高度的过渡(不采用 max-height)

1. 前言

不知大家是否接触过元素高度的过渡,之前呢我是使用 CSS 加 JS 的方式来解决的,就是通过 JS 计算一下要过渡的元素的高度,然后自己给它加上 height 为某一数值。不知大家是如何解决的?

相信大家在做高度过渡时,都会在想为什么无法实现?就比如下面的代码。

html 复制代码
<style>

    .details {
        position: absolute;
        top: 34px;
        left: 0px;
        border-radius: 8px;
        width: 170px;
        height: 0;
        background-color: rgb(112, 232, 253);
        overflow: hidden;
        transition: height 1s;
    }

    .container {
        position: relative;
        display: inline-block;
        padding: 4px 8px;
        border-radius: 8px;
        background-color: rgb(247, 119, 119);
    }

    .container:hover .details {
        height: auto;
    }
</style>

<div class="container">
    <span>hover 元素</span>
    <div class="details">看看您错过了上个月 Google Open Source Live 活动中的哪些精彩内容。了解使用 Istio 观测您的服务、分析流经服务网格的请求等话题!</div>
</div>

实现的效果就是下面的这个样子

2. 实现

可以看到元素的高度无法从 0 过渡到 auto,因为 auto 不是一个数值。

下面我们会讨论一下 max-height 和 transform 来实现它有什么问题。

2.1. max-height 实现的问题

如果我们询问 ChatGPT 来解决这个问题,它大概率就会向你介绍这个方法,但是这个方法并不能很好的解决。下面是使用 max-height 实现的一个效果。

我们通过过渡 max-height 属性来实现这个效果,就是刚开始时过渡元素的 max-height 为 0,当鼠标触发 hover 时,元素的 max-height 属性则过渡到一个比较大的值,例如 1000px。

但是这样有一个缺点,就是鼠标移入时,我们会注意到鼠标刚移入时,元素高度过渡地特别快,感觉就是嗖地一下就完成了过渡;然后还有鼠标移除时,元素的高度并没有立即过渡,因为元素的 max-height 属性此时为 1000px,要从 1000px 过渡到元素的高度,这段距离还要花一段时间,所以感觉上就是元素延迟了一下,再进行过渡。

2.2. transform 实现的问题

当然上面的方法行不通,我们可以再让 ChatGPT 为我们提供其他的解决方法。这个方法大概率也会提供给你。

这个方法的原理就是使用 transform: scale(),即在 scale(0) 和 scale(1) 之间变化,但是这个会压缩元素的内容,如果你认为你能接受,那这个就不是问题。

2.3. grid 网格实现

其实解决元素高度的过渡也很简单,使用 display: grid 就能解决,相信大多数学前端的小伙伴对 grid 了解的并不多,为什么?可能是因为尚硅谷,黑马程序员的课程还没有更新相关的内容吧,哈哈~不知道大家是看尚硅谷还是看的黑马,我是看的 pink 入门的。

话不多说,实现的代码也很简单,下面就给大家完整的代码:

html 复制代码
<style>
    .details {
        position: absolute;
        display: grid;
        grid-template-rows: 0fr;
        top: 34px;
        left: 0px;
        transition: all 2000ms;
    }

    .details .content {
        width: 170px;
        border-radius: 8px;
        background-color: rgb(112, 232, 253);
        overflow: hidden;  
    }

    .container {
        position: relative;
        display: inline-block;
        padding: 4px 8px;
        border-radius: 8px;
        background-color: rgb(247, 119, 119);
    }

    .container:hover .details {
        grid-template-rows: 1fr;
    }
</style>

<div class="container">
    <span>hover 元素</span>
    <div class="details">
        <div class="content">看看您错过了上个月 Google Open Source Live 活动中的哪些精彩内容。了解使用 Istio 观测您的服务、分析流经服务网格的请求等话题!</div>
    </div>
</div>

实现的效果如下:

当然还要注意一点,由于 details 中的元素是文字,所以需要加上一个子元素并具有 overflow: hidden 属性,亲测有效。

如果这篇文章对你有所帮助,还请点个小小的赞~ 谢谢~~

相关推荐
JamSlade20 分钟前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保22 分钟前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo121529 分钟前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux42 分钟前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied1 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果1 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
Luffe船长2 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
Demoncode_y2 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
明天最后2 小时前
使用 Service Worker 限制请求并发数
前端·service worker
java水泥工2 小时前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示