bg-gradient-to-t 不能实现真正的渐变消失，它仅定义渐变方向；真正淡出需用 opacity + transition，配合 transitionend 或 setTimeout 才能彻底移除元素。
用 bg-gradient-to-t 做渐变消失？不行，这是常见误解
直接说结论：bg-gradient-to-t 本身不控制透明度，它只定义背景色的渐变方向和颜色停点。想让元素“渐变消失”，靠纯 bg-gradient-to-t 加透明色（比如 transparent）只能做出**视觉上的顶部淡化效果**，但元素本身依然占据空间、响应事件、无法真正“淡出隐藏”。这不是动画，也不是过渡，更不是 DOM 移除前的 fade-out 效果。
真正实现“渐变消失”得靠 opacity + transition
要让元素平滑地从可见到不可见，核心是改 opacity，再配合 transition。渐变感只是视觉错觉，实际靠的是 opacity 线性变化 + 人眼对边缘弱对比的感知偏差。
-
opacity: 1→opacity: 0是标准做法，浏览器原生支持且性能好 - 必须显式声明
transition: opacity 0.3s ease，否则没动画 - 如果想在消失后彻底移除元素，得监听
transitionend事件或用setTimeout，否则opacity: 0的元素仍占布局、挡点击 - Tailwind 中可直接用
transition-opacity、duration-300、ease-in-out组合
bg-gradient-to-t 配 transparent 的真实用途
它适合做“内容区域顶部软化收边”，比如长列表滚动时顶部自然隐去，或卡片内容溢出时柔化边界——但前提是：背景本身是纯色/单色，且容器有固定高度或 overflow-hidden。
- 典型写法：
bg-gradient-to-t from-transparent via-white/0 to-white/80（注意：/0和/80是 Tailwind 的 opacity 后缀，不是 CSS 原生语法） - 不能替代
opacity动画，因为 gradient 是静态背景图层，不参与元素整体透明度计算 - 在深色模式下容易翻车：如果
via-white/0在暗背景下变成灰黑，渐变会断层，建议用via-bg/0或明确色值 - 移动端 Safari 对
from-transparent渲染偶有闪烁，可加will-change: background缓解
想模拟“从下往上渐隐消失”？得组合动效
单纯方向类渐变类工具（如 bg-gradient-to-t）做不到动态消失。真要这种效果，得靠 transform + opacity 联动：
- 初始状态：
opacity-100 translate-y-0 - 消失中：
opacity-0 translate-y-4（向下微移强化“沉下去”的感知） - 必须配
transition-all duration-500 ease-out，否则只有 opacity 动，缺乏方向感 - 别用
scale模拟——缩放会挤压文字，失真明显；translateY更轻量、更可控
最常被忽略的一点：渐变消失从来不是单一样式能搞定的事。它要么是视觉修饰（gradient），要么是交互反馈（opacity + transition），要么是动效叙事（transform + opacity）。混用但不混淆，才是关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
