本文介绍一种无需 JavaScript、仅用 CSS 即可实现 .portCardContent 从 bottom: 0 平滑滑动至顶部（视觉上等效于 top: 0）的可靠方案，核心在于组合使用 bottom 与 translateY()，规避 top/bottom 互斥导致的过渡失效问题。
本文介绍一种无需 javascript、仅用 css 即可实现 `.portcardcontent` 从 `bottom: 0` 平滑滑动至顶部（视觉上等效于 `top: 0`）的可靠方案，核心在于组合使用 `bottom` 与 `translatey()`，规避 `top`/`bottom` 互斥导致的过渡失效问题。
在 CSS 动画中，直接对 top 和 bottom 属性同时设置并期望过渡生效是不可行的——因为它们属于互斥定位属性（同一时刻仅一个生效），浏览器无法计算中间状态，导致过渡被跳过或完全失效。解决这一问题的关键思路是：保持定位基准一致，仅通过位移属性（如 transform: translateY()）驱动动画，而用 bottom 控制初始/终态的“锚点位置”。
以下为推荐实现方案（已优化兼容性与可维护性）：
.portCard {
position: relative;
overflow: hidden;
max-width: 250px;
}
.portCard img {
display: block; /* 避免图片下方默认空白间隙 */
width: 100%;
height: auto;
}
.portCardContent {
position: absolute;
left: 0;
right: 0;
bottom: 0; /* 初始状态：贴底 */
text-align: center;
background-color: #86B971;
z-index: 1;
padding: 1rem;
transition: transform 0.5s cubic-bezier(0.1, 0.72, 0.4, 0.97),
bottom 0.5s ease; /* 同时过渡 transform 和 bottom，确保动画连贯 */
}
.portCard:hover .portCardContent {
bottom: 100%; /* 将元素推离可视区底部（向下偏移自身高度） */
transform: translateY(-100%); /* 向上位移自身高度，使内容精准抵达顶部区域 */
}
✅ 原理说明：
- 初始态：bottom: 0 + transform: translateY(0) → 内容紧贴容器底部；
- 悬停态：bottom: 100%（将元素基线下移至容器外）+ transform: translateY(-100%)（再向上拉回自身高度）→ 视觉效果等同于“从底部滑入顶部”，且全程由 transform 主导动画，硬件加速，性能优异。
⚠️ 注意事项：
- 不要删除 bottom 的过渡声明（即使它本身不产生视觉动画），它能防止悬停瞬间因 bottom 突变引发的布局抖动；
- translateY(-100%) 的基准是元素自身高度，因此需确保 .portCardContent 高度可预测（避免 height: auto 在过渡中引发计算延迟）；若内容高度动态变化，建议添加 min-height 或用 flex 布局增强稳定性；
- 如需支持旧版浏览器（如 IE），可补充 -webkit-transform 前缀，并将 translate 替换为 transform: translate(0, -100%)（translate 是 transform 的简写，但部分旧引擎需全写）。
该方案简洁、高效、语义清晰，适用于卡片悬停展开、导航菜单滑入等常见交互场景，是纯 CSS 实现“底部→顶部”平滑过渡的最佳实践之一。
