1. 这个交互到底在解决什么问题先把这个需求掰开来看。页面上有一段文字默认状态下它的底部被一层渐变遮罩盖住越往下越模糊、越透明视觉上给人一种“内容还没完但被折叠了”的暗示。用户点一下遮罩消失全文展开再点一下遮罩回来文字重新被盖住。这个模式在资讯流、商品详情、课程介绍、用户评论、公告栏里非常常见。它比“展开全文”按钮优雅的地方在于遮罩本身就是视觉语言不需要额外解释用户一眼就知道下面还有内容。而它比直接截断文字高明的地方在于用户能预览到部分被遮住的内容产生“我想看看后面写了什么”的冲动。我做过好几个内容型项目这个交互的复用率极高。但每次实现都会遇到几个绕不开的问题遮罩用纯色还是渐变渐变的方向和透明度怎么调点击区域是整个容器还是单独按钮展开后高度怎么过渡文字长度不够时遮罩要不要显示这些问题如果不在动手前想清楚写出来的代码大概率要返工。这篇文章就把我踩过的坑和最终沉淀下来的方案完整拆一遍。核心关键词是Vue 组件封装、CSS 渐变遮罩、半透明遮盖文字、点击展开收起、动态高度过渡。适合有 Vue 基础、想把这个交互做扎实的前端同学也适合刚接触 CSS 渐变、想找个真实场景练手的初学者。2. 整体设计思路与方案选型2.1 为什么用 CSS 渐变而不是图片或纯色块最早我试过用一张半透明白色渐变 PNG 盖在文字底部。问题是背景色一换图片就得重新做不同项目的主题色不一样维护成本极高。后来改用纯色半透明块又发现边缘太生硬文字像被一刀切断视觉上很突兀。CSS 渐变是这个问题的最优解。linear-gradient可以直接从透明过渡到背景色边缘柔和而且颜色值跟着主题变量走换肤不用改结构。更关键的是渐变层可以用pointer-events: none让点击穿透不会挡住文字本身的选中和复制。具体来说遮罩层用绝对定位铺在文字容器底部高度固定背景写成linear-gradient(to bottom, transparent, #fff)。这样顶部完全透明底部完全不透明中间自然过渡。如果背景不是纯白把#fff换成对应的背景色变量即可。2.2 高度控制固定高度还是动态计算遮罩的高度不能拍脑袋定。定太高文字被盖住太多用户预览不到有效内容定太低遮罩效果不明显用户根本注意不到下面还有字。我的经验值是遮罩高度取容器可视高度的30% 到 40%同时设一个最小高度比如60px防止容器本身很矮时遮罩占比过大。如果容器高度是动态的可以用calc()或者绑定内联样式来计算。这里有个细节遮罩高度最好和文字的行高成整数倍关系。比如行高28px遮罩高度设84px3 行或112px4 行这样遮罩的渐变结束位置刚好落在某一行文字的底部不会出现半行字被切一半的尴尬情况。这个技巧我在多个项目里验证过视觉上干净很多。2.3 展开收起的交互逻辑设计点击行为有两种常见方案一种是点击整个容器切换另一种是点击遮罩上的“展开”按钮切换。我倾向于整个容器可点击因为移动端手指点击区域越大越好而且用户的心理预期就是“点哪里都能展开”。但整个容器可点击会带来一个问题如果文字里有链接或按钮点击会被容器拦截。解决办法是用事件委托判断event.target如果点的是内部交互元素就放行否则才触发切换。这个逻辑在 Vue 里用click配合条件判断就能搞定。状态管理上只需要一个布尔值isExpanded。展开时容器高度设为auto遮罩透明度降为 0 并禁用点击收起时高度回到固定值遮罩恢复。这里要注意height: auto是无法做 CSS 过渡的所以如果要做平滑动画得用max-height或者 JS 计算实际高度。我后面会详细讲这个坑。3. 核心细节解析与实操要点3.1 渐变遮罩的 CSS 写法与参数调优先看最基础的遮罩样式.mask { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 1) 100% ); pointer-events: none; transition: opacity 0.3s ease; }这里有几个参数值得细说。渐变方向用to bottom是最自然的因为文字是从上往下阅读的底部被盖住符合直觉。颜色停靠点我用了三个0% 完全透明40% 半透明100% 完全不透明。为什么不在 50% 设中间值因为人眼对渐变中段的感知更敏感把半透明点提前到 40%能让过渡看起来更柔和不会出现明显的“分界线”。透明度值也不是随便定的。0.6 这个中间值是我试了好几轮才定下来的。太低比如 0.3遮罩感太弱用户注意不到太高比如 0.8过渡太陡像一块布突然盖下来。0.5 到 0.65 之间是比较舒服的区间。注意如果页面背景不是纯色而是有纹理或图片渐变遮罩的颜色要取背景的主色调否则会出现色差。这种情况我建议用backdrop-filter: blur()配合半透明背景效果更高级但要注意兼容性。3.2 文字容器的定位与溢出处理遮罩要绝对定位父容器就必须是position: relative。同时容器要设overflow: hidden否则展开时文字会溢出到遮罩外面。.text-container { position: relative; overflow: hidden; transition: max-height 0.4s ease; } .text-container.collapsed { max-height: 120px; } .text-container.expanded { max-height: 2000px; }这里用max-height而不是height是因为height从固定值到auto无法过渡。max-height的过渡虽然也不是完美的如果实际高度远小于 max-height动画会显得很快但在大多数场景下够用。展开时把max-height设一个足够大的值比如2000px确保再长的文字也能完全展示。有个更精细的做法是用 Vue 的ref拿到文字容器的scrollHeight展开时把max-height动态设为这个值收起时设回固定值。这样动画时间就完全匹配实际高度不会有“展开到一半突然停住”的感觉。代码如下toggleExpand() { const el this.$refs.textContainer; if (!this.isExpanded) { el.style.maxHeight el.scrollHeight px; } else { el.style.maxHeight 120px; } this.isExpanded !this.isExpanded; }3.3 点击区域的判定与事件处理前面提到整个容器可点击但要排除内部交互元素。在 Vue 里可以这样写handleClick(event) { const tag event.target.tagName.toLowerCase(); if ([a, button, input].includes(tag)) { return; } this.toggleExpand(); }这样点链接就正常跳转点其他区域才触发展开收起。另外如果容器内有文字被选中用户的本意可能是复制而不是展开这时候可以用window.getSelection().toString()判断是否有选中文本有的话就不触发切换。这个细节很小但能明显提升体验。还有一个容易被忽略的点遮罩层虽然设了pointer-events: none但如果遮罩上放了“展开”按钮按钮本身要设pointer-events: auto否则点不到。我一般不在遮罩上放按钮而是把提示文字放在遮罩上方或者右下角用绝对定位单独处理。4. 完整实操过程与核心环节实现4.1 组件结构搭建与数据定义先搭一个完整的 Vue 单文件组件骨架。我用 Vue 3 的 Composition API 写法Options API 同理。template div classtext-container :class{ collapsed: !isExpanded, expanded: isExpanded } reftextContainer clickhandleClick div classtext-content slot/slot /div div classmask :class{ hidden: isExpanded } v-showshowMask /div div classtoggle-hint v-ifshowMask {{ isExpanded ? 收起 : 展开 }} /div /div /template数据部分需要这几个状态isExpanded控制展开收起showMask控制遮罩是否显示文字太短时不显示collapsedHeight是收起时的高度。import { ref, computed, onMounted, nextTick } from vue; const isExpanded ref(false); const showMask ref(true); const textContainer ref(null); const collapsedHeight ref(120);4.2 文字长度检测与遮罩显示判断不是所有文字都需要遮罩。如果文字本身就没超过收起高度遮罩盖上去反而奇怪。所以组件挂载后要检测实际高度onMounted(() { nextTick(() { const el textContainer.value; if (el.scrollHeight collapsedHeight.value) { showMask.value false; isExpanded.value true; } }); });这里用nextTick是因为要等 DOM 渲染完成才能拿到准确的scrollHeight。如果文字是异步加载的比如从接口请求回来再渲染那检测逻辑要放在数据更新之后可以用watch监听内容变化重新判断。提示scrollHeight包含内边距但不包含边框和滚动条计算时要注意容器的box-sizing。我一般统一设box-sizing: border-box省得算来算去。4.3 展开收起的动画实现与高度计算展开收起的核心是高度过渡。前面说了用max-height但更顺滑的做法是动态计算。完整逻辑如下const toggleExpand () { const el textContainer.value; if (!isExpanded.value) { el.style.maxHeight el.scrollHeight px; isExpanded.value true; } else { el.style.maxHeight collapsedHeight.value px; isExpanded.value false; } };配合 CSS 过渡.text-container { transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }缓动函数用cubic-bezier(0.4, 0, 0.2, 1)是 Material Design 的标准曲线起步稍慢、中间快、结尾缓看起来比较自然。如果追求更活泼的效果可以用cubic-bezier(0.68, -0.55, 0.27, 1.55)带一点回弹但内容型页面我建议还是稳重一点。遮罩的淡出用opacity过渡.mask { transition: opacity 0.3s ease; } .mask.hidden { opacity: 0; pointer-events: none; }注意遮罩淡出时不要直接display: none那样没有过渡效果。用opacity配合pointer-events控制交互视觉上更平滑。4.4 遮罩层与提示文字的样式细节遮罩的样式前面给过了这里补充提示文字的处理。提示文字一般放在遮罩右下角或者底部居中颜色要比正文浅一点字号小一点。.toggle-hint { position: absolute; right: 12px; bottom: 8px; font-size: 13px; color: #999; cursor: pointer; z-index: 2; }这里z-index要高于遮罩否则会被盖住。但提示文字本身又在遮罩区域内所以遮罩的pointer-events: none就很重要不然点提示文字会被遮罩拦截。如果希望提示文字更明显可以在它下面加一个小箭头图标用 CSS 画或者用字体图标都行。展开后箭头旋转 180 度这个用transform: rotate()配合过渡就能实现。5. 常见问题与排查技巧实录5.1 遮罩不显示或显示异常最常见的原因是父容器没有设position: relative导致遮罩的绝对定位跑到了页面其他位置。检查一下.text-container有没有position: relative。另一个原因是overflow: hidden没设遮罩虽然定位对了但文字溢出后盖住了遮罩。或者遮罩的z-index太低被文字内容压住了。遮罩的z-index要高于文字内容但低于提示文字。还有一种情况是背景色和遮罩渐变色不一致看起来像遮罩没生效。这时候检查一下渐变里的颜色值是不是和页面背景一致特别是用了主题变量的项目变量作用域可能有问题。5.2 展开后高度跳变或动画卡顿高度跳变通常是因为max-height设得太大或太小。设太大动画前半段几乎看不到变化后半段突然展开设太小文字展不开。用scrollHeight动态计算是最稳的。动画卡顿可能是过渡属性写多了。只对max-height和opacity做过渡不要对height、padding、margin同时过渡浏览器计算量会很大。另外如果文字内容特别长比如几千字展开动画可能会掉帧。这种情况可以限制最大展开高度超出部分用内部滚动。5.3 点击事件冲突与冒泡处理如果容器外层还有点击事件比如整个卡片可点击跳转那展开收起的点击会冒泡上去触发跳转。解决办法是在handleClick里加event.stopPropagation()或者在外层判断事件来源。还有一种情况是文字里有按钮或链接点击时既触发了按钮又触发了展开。前面说的tagName判断能解决大部分问题但如果用的是自定义组件tagName可能不是标准的button这时候可以用event.target.closest(.no-toggle)来判断给不需要触发展开的元素加个no-toggle类。5.4 移动端适配与触摸体验移动端上click事件有 300ms 延迟虽然现代浏览器基本没了但触摸反馈还是很重要。可以加一个:active状态的背景色变化让用户知道点到了。.text-container:active { background-color: rgba(0, 0, 0, 0.02); }另外移动端文字容器的高度要重新评估120px在手机上可能只显示三四行遮罩占比会很大。我一般用媒体查询在小屏下把收起高度调到90px左右遮罩高度调到60px。5.5 常见问题速查表问题现象可能原因排查方向遮罩不显示父容器未设 relative检查 position 属性遮罩盖住提示文字z-index 层级错误调整遮罩和提示的 z-index展开动画卡顿过渡属性过多只保留 max-height 和 opacity点击无反应遮罩拦截了点击检查 pointer-events文字短也显示遮罩未做长度检测挂载后判断 scrollHeight展开后无法收起状态未同步检查 isExpanded 绑定移动端点击区域小容器高度不足媒体查询调整高度6. 几个我踩过的坑和优化建议第一个坑是遮罩渐变在深色模式下失效。浅色背景用白色渐变没问题深色背景就得换成深色渐变。我的做法是定义 CSS 变量--mask-color浅色模式设为#fff深色模式设为#1a1a1a渐变里引用这个变量。这样换肤时只改一个值。第二个坑是文字内容动态更新后遮罩状态没重置。比如用户切换了文章新文章很短不需要遮罩但组件还保持着展开状态。解决办法是监听内容变化重新执行长度检测逻辑把isExpanded和showMask重置。第三个优化点是无障碍访问。容器可点击但没有语义屏幕阅读器用户不知道这里可以展开。加一个rolebutton和aria-expanded属性键盘用户可以用 Enter 键触发。div rolebutton :aria-expandedisExpanded tabindex0 keydown.entertoggleExpand 第四个优化是性能。如果页面上有很多这样的组件每个都监听scrollHeight会有性能开销。可以用IntersectionObserver只在组件进入视口时才做检测或者用ResizeObserver监听容器尺寸变化。不过大多数场景下直接检测就够用不用过度优化。最后分享一个视觉上的小技巧遮罩的渐变不要只用两个颜色停靠点加一个中间点会让过渡更自然。我常用的配置是transparent 0%、rgba(255,255,255,0.7) 50%、#fff 100%。这个 0.7 的中间值比 0.6 稍微实一点在大多数屏幕上看起来更舒服。当然具体数值要根据实际背景和文字颜色微调没有万能参数多试几次就能找到感觉。