企业官网建设流程全解析

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，遮罩高度设84px（3 行）或112px（4 行），这样遮罩的渐变结束位置刚好落在某一行文字的底部，不会出现半行字被切一半的尴尬情况。这个技巧我在多个项目里验证过，视觉上干净很多。

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 class="text-container" :class="{ collapsed: !isExpanded, expanded: isExpanded }" ref="textContainer" @click="handleClick" > <div class="text-content"> <slot></slot> </div> <div class="mask" :class="{ hidden: isExpanded }" v-show="showMask" ></div> <div class="toggle-hint" v-if="showMask"> {{ 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 常见问题速查表

6. 几个我踩过的坑和优化建议

第一个坑是遮罩渐变在深色模式下失效。浅色背景用白色渐变没问题，深色背景就得换成深色渐变。我的做法是定义 CSS 变量--mask-color，浅色模式设为#fff，深色模式设为#1a1a1a，渐变里引用这个变量。这样换肤时只改一个值。

第二个坑是文字内容动态更新后遮罩状态没重置。比如用户切换了文章，新文章很短不需要遮罩，但组件还保持着展开状态。解决办法是监听内容变化，重新执行长度检测逻辑，把isExpanded和showMask重置。

第三个优化点是无障碍访问。容器可点击但没有语义，屏幕阅读器用户不知道这里可以展开。加一个role="button"和aria-expanded属性，键盘用户可以用 Enter 键触发。

<div role="button" :aria-expanded="isExpanded" tabindex="0" @keydown.enter="toggleExpand" >

第四个优化是性能。如果页面上有很多这样的组件，每个都监听scrollHeight会有性能开销。可以用IntersectionObserver只在组件进入视口时才做检测，或者用ResizeObserver监听容器尺寸变化。不过大多数场景下直接检测就够用，不用过度优化。

最后分享一个视觉上的小技巧：遮罩的渐变不要只用两个颜色停靠点，加一个中间点会让过渡更自然。我常用的配置是transparent 0%、rgba(255,255,255,0.7) 50%、#fff 100%。这个 0.7 的中间值比 0.6 稍微实一点，在大多数屏幕上看起来更舒服。当然具体数值要根据实际背景和文字颜色微调，没有万能参数，多试几次就能找到感觉。