因CSS导致弹窗退出动画异常，需调整为与进入动画一致

问题核心：弹窗设置top: 0; bottom: 0后，退出动画会向右上角移动，需改为仅向右滑出，与进入动画一致。

解决方案 #

• 替换弹窗的垂直定位方式：将top: 0; bottom: 0改为top: 0; height: 100vh，固定弹窗高度为视口高度，避免动画过程中浏览器重排导致的垂直偏移。
• 确保过渡动画仅作用于right属性，保持垂直位置全程不变。

修改后的关键CSS代码 #

.slide-out-panel {
  position: fixed;
  top: 0;
  height: 100vh; /* 替代bottom:0 */
  right: -400px;
  width: 400px;
  background: white;
  transition: right 0.3s ease-in-out;
}

原理说明 #

用height:100vh固定高度后，弹窗的垂直位置和尺寸不再依赖父元素或视口的动态计算，动画时仅修改right属性，就能保证和进入动画一样，只做水平方向的滑出动作，不会出现垂直偏移。

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