CSS Grid悬停结束及切换时过渡动画突兀问题求助

问题根源 #

1. visibility属性无法过渡：visibility是离散状态（可见/不可见），不支持CSS过渡动画，导致hover结束时元素直接消失，无平滑效果。
2. 状态切换强制中断过渡：切换hover目标时，:has()选择器的状态瞬间切换，前一个元素的过渡进程被直接覆盖，出现突兀跳转。
3. width:0破坏布局连贯性：该属性会导致元素宽度瞬间收缩，与Grid列宽的过渡动画冲突，引发布局跳变。

修复方案 #

以下是调整后的CSS代码，解决了过渡不流畅和切换中断的问题：

.container {
  width: 50vw;
  height: 10vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  gap: 1vw;
  /* 明确指定过渡属性，避免all带来的性能问题 */
  transition: grid-template-columns 0.5s ease-in-out;
}

.container > div {
  background-color: #32363e;
  border-radius: 5px;
  color: white;
  opacity: 0.8;
  padding: 1vw;
  /* 明确过渡属性 */
  transition: opacity 0.5s ease-in-out;
}

.container > div:hover > div {
  border: solid yellow 1px;
  /* 移除!important，用opacity控制显示 */
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* 统一Grid列宽切换规则 */
.container:has(.proj1:hover) { grid-template-columns: 5fr 1fr 1fr 1fr 1fr; }
.container:has(.proj2:hover) { grid-template-columns: 1fr 5fr 1fr 1fr 1fr; }
.container:has(.proj3:hover) { grid-template-columns: 1fr 1fr 5fr 1fr 1fr; }
.container:has(.proj4:hover) { grid-template-columns: 1fr 1fr 1fr 5fr 1fr; }
.container:has(.proj5:hover) { grid-template-columns: 1fr 1fr 1fr 1fr 5fr; }

/* 非hover子元素内容隐藏逻辑：用opacity+transform+pointer-events替代visibility和width */
.container:has(> div:hover) > div:not(:hover) > div {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.container > div h1 {
  font-size: small;
  transition: font-size 0.5s ease-in-out;
  text-align: center;
}

.container > div p,
.container > div ul,
.container > div h5 {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.container > div:hover p,
.container > div:hover ul,
.container > div:hover h5 {
  opacity: 0.8;
  pointer-events: auto;
  transform: translateY(0);
}

.container > div:hover h1 {
  font-size: 2em;
}

.container > div > div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr 1fr 1fr;
  gap: 2vh;
  /* 给内部容器添加过渡，确保状态切换平滑 */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

关键优化点 #

• 用opacity+transform+pointer-events替代visibility和width:0，实现完全平滑的过渡效果。
• 明确指定过渡属性，避免all导致的冗余过渡和性能损耗。
• 统一非hover子元素的隐藏规则，简化CSS逻辑，确保状态切换时过渡连贯。
• 移除!important，通过CSS优先级合理控制样式，避免样式冲突。

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