Vue3 Toast组件TransitionGroup退出动画斜移问题求助

核心思路 #

避免给退出元素设置position: absolute导致脱离布局引发位置偏移，改用固定元素原始Y轴位置的方式，让退出动画仅在X轴生效，同时维持列表其他元素的平滑过渡效果。

具体实现步骤 #

1. 给Toast项和父容器设置定位与固定高度
   父容器设为相对定位，每个Toast项设置固定高度，确保子元素的位置参考父容器，避免视口定位导致的偏移：

   .toast-list {
     position: relative;
     display: flex;
     flex-direction: column-reverse;
     gap: 8px;
     position: fixed;
     bottom: 20px;
     right: 20px;
   }
   .toast-item {
     height: 60px;
     position: relative;
   }
   

2. 调整退出动画的CSS规则
   退出阶段不脱离文档流，仅通过X轴位移和透明度实现滑出，同时利用Vue自动生成的v-move类处理列表项的位置过渡：

   .toast-item-leave-active {
     transition: all 0.3s ease;
     position: relative;
   }
   .toast-item-leave-to {
     opacity: 0;
     transform: translateX(100%);
   }
   .toast-item-move {
     transition: transform 0.3s ease;
   }
   

3. 优化布局计算
   父容器使用flex-direction: column-reverse让Toast从下往上堆叠，配合gap控制间距，确保Toast项移除时，剩余项的位置计算准确，实现平滑向上过渡。

关键原理 #

让退出元素保留在文档流中，避免position: absolute导致的Y轴位置丢失；仅通过X轴transform实现水平滑出，同时v-move类自动处理列表项的位置变化，保证其他Toast平滑移动，彻底解决斜向移出的问题。

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