scaleX(0)状态下最后一个预览图随机错位问题求助

问题描述 #

• 实现项目链接列表，布局为左侧Logo+标签、右侧预览图
• 交互逻辑：鼠标hover项目时，预览图scaleX变为1；hover预览图可点击「Visit」跳转
• 异常现象：最后一个预览图随机出现在div左上角，既未保持scaleX: 0的初始状态，位置也严重偏移
• 触发条件：滚动到该div区域时出现，怀疑是animation-timeline: scroll(root block)属性导致
• 运行环境：Chrome 120.0.6099.227、Windows 11 Home

问题根源 #

滚动时间线动画（animation-timeline: scroll(root block)）与子元素的transform属性发生冲突。.projects容器的滚动展开动画会覆盖最后一个子元素.project .img的初始transform: scaleX(0)设置，导致其位置和缩放状态异常。

修复方案 #

方案1：移除滚动触发的展开动画（若无需此交互） #

直接删除.projects中的滚动时间线属性，避免动画冲突：

.projects {
  position: relative;
  animation: expand 0.5s forwards;
  /* 移除以下行：animation-timeline: scroll(root block); */
}

方案2：保留滚动动画，修复transform冲突 #

给.project .img添加属性，确保其transform不受父容器动画影响：

.project .img {
  position: relative;
  transform: scaleX(0);
  transition: transform 0.3s, opacity 0.1s; /* 合并重复的transition */
  height: 100px;
  width: 200px;
  transform-origin: right;
  /* 添加以下属性隔离transform */
  will-change: transform;
  transform-style: preserve-3d;
}

同时给父容器.projects添加transform隔离：

.projects {
  position: relative;
  animation: expand 0.5s forwards;
  animation-timeline: scroll(root block);
  transform-style: preserve-3d;
}

方案3：调整动画作用目标 #

将滚动展开动画应用到.projects-container而非.projects，避免直接影响项目列表元素：

.projects-container {
  position: relative;
  animation: expand 0.5s forwards;
  animation-timeline: scroll(root block);
}

.projects {
  position: relative;
  /* 移除原有animation相关属性 */
}

额外优化建议 #

1. 替换列表key值：React列表渲染中避免用index作为key，改用项目唯一标识（如project.id），防止重渲染异常
2. 合并重复transition：.project .img中存在重复的transition属性，合并为单一声明提升可维护性
3. 替换id选择器：避免使用重复的#name、#visit id选择器，改用class选择器统一样式优先级

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