如何消除动画结尾内部元素突然跳变，实现20%/60%/20%高度布局？

嘿，这个结尾跳变的问题我太熟了——本质上就是动画结束后元素“打回原形”了！咱们一步步解决它，既能实现目标布局，又能彻底消除跳变。

问题根源 #

动画默认在结束后会回到元素的初始样式，如果你的动画关键帧最后一帧的高度和元素最终要保持的20%/60%/20%不匹配，或者没给元素设置持久的最终样式，就会出现突然跳变的情况。

核心解决方案：让动画最终帧 = 元素持久样式 #

方法1：用CSS animation-fill-mode: forwards（最推荐） #

这个属性会让动画结束后直接停留在最后一帧的样式，再配合给元素设置最终的持久高度，双重保险避免跳变。

假设你的容器用flex布局（最适合按比例分配高度），示例代码如下：

/* 容器设置：固定高度 + 垂直flex布局 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 可以替换成你需要的固定高度 */
}

/* 元素的最终持久样式：20%/60%/20% */
.one, .three {
  height: 20%;
}
.two {
  height: 60%;
}

/* 动画关键帧：确保最后一帧和持久样式完全一致 */
@keyframes expandTopBottom {
  0% {
    height: 0; /* 动画初始状态，比如顶部和底部元素高度为0 */
  }
  100% {
    height: 20%; /* 和最终持久样式完全匹配 */
  }
}

/* 给顶部和底部元素应用动画，加上forwards */
.one, .three {
  animation: expandTopBottom 1s ease-in-out forwards;
}

这里的forwards是关键，它强制元素在动画结束后保持最后一帧的样式，和我们提前设置的height:20%完全对齐，就不会有跳变了。

方法2：用JavaScript在animationend事件中锁定样式 #

如果你必须用JS控制，那一定要在动画结束后设置和最终目标一致的样式，且最好提前给元素设置默认的最终样式：

const one = document.querySelector('.one');
const three = document.querySelector('.three');

// 提前设置元素的最终样式，避免动画结束前的样式冲突
one.style.height = '20%';
three.style.height = '20%';
// 然后移除初始样式，或者通过动画覆盖初始状态（根据你的动画逻辑调整）

one.addEventListener('animationend', () => {
  // 再次明确设置最终样式，确保和动画最后一帧一致
  one.style.height = '20%';
  three.style.height = '20%';
});

不过这种方式不如CSS forwards稳定，因为JS事件可能有微小延迟，视觉上还是可能出现闪跳。

进阶优化：用flex-grow实现比例布局（更灵活） #

如果你的布局是动态的，用flex-grow代替固定百分比高度会更适配不同容器尺寸，动画也更流畅：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 最终比例：0.2/0.6/0.2 对应20%/60%/20% */
.one, .three {
  flex-grow: 0.2;
}
.two {
  flex-grow: 0.6;
}

@keyframes growFlex {
  0% {
    flex-grow: 0;
  }
  100% {
    flex-grow: 0.2;
  }
}

.one, .three {
  animation: growFlex 1s ease-in-out forwards;
}

这种方式下，flex布局会自动分配容器空间，动画的过渡也会更自然，几乎不会出现跳变问题。

额外检查点 #

• 确保容器有固定高度（比如100vh、具体像素值），否则百分比高度或flex-grow无法正确计算。
• 检查动画关键帧的过渡曲线，避免用step()这类生硬的曲线，尽量用ease-in-out这类平滑曲线。
• 不要在动画结束后修改元素的布局属性（比如display、position），否则也会触发跳变。

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