导航栏元素动画启动前向上跳动问题求助

问题原因 #

1. DOM结构异常：你的JSX代码中Resume对应的<h2>标签未闭合，浏览器解析DOM时会出现异常，间接影响布局计算；
2. 布局属性突变：点击后添加的clicked类里，line-height:90%是从默认行高突然改变的，这会触发元素盒模型的布局重排，和transform: translateY(15px)的过渡动画叠加，就出现了先向上跳动再向下位移的异常；
3. 对齐方式不稳定：.navbar设置了align-items: start，这种对齐方式下元素初始位置依赖内容行高，行高突变时更容易出现位置偏移。

修复方案 #

步骤1：修复DOM结构

先补上未闭合的<h2>标签，确保DOM结构正确：

<div className="navbar">
   <h2 onClick={setPersonal} className={page===1 ? "clicked":""} >Personal</h2>           
   <h2 onClick={setResume} className={page===2 ? "clicked":""} >Resume</h2>                       
   <h2 onClick={setContacts} className={page===3 ? "clicked":""} >Contact me</h2>
</div>

步骤2：消除line-height突变的影响

有两种可选方式：

方式一：用transform替代line-height实现文字压缩（推荐）

如果需要文字看起来更紧凑，用scaleY替代line-height——transform不会改变元素布局，仅影响视觉呈现，避免布局重排：

.navbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
  display: flex;
  justify-content:  space-between;
  align-items: center; /* 改为center，让初始对齐更稳定 */
  padding-right: 30px;
  margin-bottom: 2rem;
  margin-top: 21px;
}

.navbar h2{
  margin: 0px;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.5s ease;
  height: 24px; /* 固定高度，避免行高影响布局 */
  line-height: 24px; /* 初始行高与高度一致 */
}

.navbar h2.clicked {
  transform: translateY(15px) scaleY(0.9); /* 用scaleY实现文字垂直压缩 */
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

方式二：给line-height添加过渡动画

如果一定要保留line-height的设置，把它加入过渡属性，让行高变化和位移动画同步进行：

.navbar h2{
  margin: 0px;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.5s ease, line-height 0.5s ease; /* 加入line-height的过渡 */
}

.navbar h2.clicked {
  transform: translateY(15px);
  line-height: 90%;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

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