如何实现div从bottom:0到top:0的平滑过渡动画？

要实现portCardContent从bottom:0平滑过渡到top:0的效果，核心是使用单一可过渡属性（如transform）替代切换top/bottom属性——CSS过渡仅支持数值型属性的连续变化，auto值无法触发过渡。

修改后的CSS代码 #

.portCard * {
  max-width: 100%;
  transition: .35s .35s transform cubic-bezier(.1,.72,.4,.97);
}

.portCard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 250px;
}

.portCardContent {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0px);
  width: 100%;
  text-align: center;
  background-color: #86B971;
  z-index: 1;
  bottom: 0;
  height: auto;
  /* 仅针对transform属性添加过渡，确保平滑动画 */
  transition: transform 0.35s cubic-bezier(.1,.72,.4,.97);
}

.portCard:hover .portCardContent {
  /* 将元素底部定位到父元素顶部（瞬间完成，不可见） */
  bottom: 100%;
  /* 通过transform向下移动自身高度，到达父元素顶部位置（平滑过渡） */
  transform: translate(-50%, 100%);
}

.portCardTitle {
  font-size: 1.2em;
  font-weight: 700;
}

.portCardText {
  font-size: .8em;
}

.portCardLink {
  display: none;
}

实现原理 #

1. 初始状态：portCardContent通过bottom:0固定在卡片底部，transform: translate(-50%,0)实现水平居中。
2. hover状态：
   • 瞬间设置bottom:100%，将元素底部对齐到卡片顶部（此时元素处于卡片外部，不可见）。
   • 通过transform: translate(-50%,100%)让元素向下移动自身高度，最终将元素顶部对齐到卡片顶部，这个transform的变化会触发平滑过渡，用户看到的就是元素从底部滑到顶部的效果。

替代方案（覆盖整个卡片） #

如果需求是让portCardContent从底部滑起并覆盖整个卡片，可以用max-height实现高度过渡：

.portCardContent {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  text-align: center;
  background-color: #86B971;
  z-index: 1;
  bottom: 0;
  top: auto;
  max-height: 120px; /* 初始值设为内容的大致高度 */
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.1,.72,.4,.97);
}

.portCard:hover .portCardContent {
  top: 0;
  bottom: 0;
  max-height: 100%;
}

内容的提问来源于stack exchange，提问作者ThatBraxGuy