Vue2 Transition-group离场元素移位：保留缩放动画且不移位

要同时满足离场元素原位缩放消失、其他元素平滑移动补位的需求，只需调整两处核心样式逻辑，以下是具体实现：

修改后的完整代码 #

<template>
  <transition-group name="fade" tag="ul" class="list">
    <li
        v-for="notification in notifications"
        :key="notification.id"
        class="item"
    >
        {{ notification.id }}
    </li>
  </transition-group>
</template>

<style scoped>
.list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative; /* 新增：作为绝对定位元素的上下文容器 */
    gap: 4px; /* 可选：添加间距让过渡效果更清晰 */
}

.item {
    transition: all 0.5s ease-in-out;
    border: 1px solid black;
    width: 50px;
    height: 30px; /* 新增：固定高度，保证元素补位时过渡平滑 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.fade {
    &-enter {
        transform: translateY(100%);
        opacity: 0;
    }

    &-enter-active {
        transition: all 0.5s ease-in-out;
    }

    &-leave-to {
        transform: scale(0);
        opacity: 0;
        transform-origin: center; /* 明确缩放中心，确保元素原位消失 */
    }

    &-leave-active {
        position: absolute; /* 保留绝对定位，让其他元素可以平滑补位 */
        transition: all 0.5s ease-in-out;
        width: 50px; /* 继承宽度，避免脱离文档流后宽高丢失 */
        height: 30px; /* 继承高度，与列表项保持一致 */
    }
}
</style>

关键修改说明 #

1. 给.list添加position: relative
   解决离场元素移位到顶部的核心问题：绝对定位元素会相对于最近的定位父级（即.list）定位，而非默认的body，从而保持在原列表位置完成缩放动画。

2. 给.item设置固定高度
   确保列表容器的高度变化是均匀可控的，其他元素在补位时能基于固定高度产生平滑的过渡效果，避免因元素高度动态变化导致的过渡跳变。

3. .fade-leave-active继承宽高
   防止绝对定位后元素脱离文档流导致宽高丢失，保证缩放动画的视觉一致性。

4. 明确transform-origin: center
   强制元素从自身中心开始缩放，严格实现"原位消失"的需求。

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