experience-item hover时文本提前显示，如何实现高度与文本同步过渡？

你遇到的不同步问题根源在于这两点：

1. 初始状态下.experience-item用overflow: hidden把超出285px高度的.experi-details内容隐藏了
2. 鼠标悬停时你直接把overflow改成visible——这个属性不支持过渡效果，会瞬间生效，所以文本立刻显示；但height设置了1秒过渡，高度会缓慢增加，就出现了文本先显示、高度后跟上的错位情况

核心思路是全程保留overflow: hidden，不要在hover时修改它，让内容随着元素高度的过渡逐步展开，实现同步显示。修改后的CSS如下：

.experience-item {
  height: 285px;
  overflow: hidden; /* 始终保留这个属性，hover时不再修改 */
  border-radius: 5px;
  transition: 1s ease-out;
  position: relative;
}

.experience-item .experi-details {
  padding: 20px;
}

.experience-item:hover {
  /* 删除overflow: visible */
  height: 500px;
  box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.2);
}

这样修改后，元素高度从285px缓慢过渡到500px的过程中，原本被隐藏的.experi-details内容会随着高度增加逐步显示，和高度变化完全同步，不会有延迟。

如果需要hover时去掉元素的圆角，也可以把border-radius加入过渡属性，让圆角变化也同步：

.experience-item {
  /* 原有属性不变，新增border-radius到过渡列表 */
  transition: height 1s ease-out, border-radius 1s ease-out;
}

.experience-item:hover {
  height: 500px;
  border-radius: 0; /* 可选：hover时移除圆角 */
  box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.2);
}

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