Vue 3 Transition-group结合CSS缩放时的跳转问题求助

问题详情 #

• 使用Vue 3的transition-group组件开发可点击动画画廊，其余功能正常，但轮播从一侧切换至另一侧时会出现小幅度跳转。
• 问题根源：画廊面板添加了CSS缩放效果，Vue在计算元素移动位置时，未考虑缩放带来的尺寸偏移，导致过渡时位置计算错误。
• 触发场景：对比未缩放画廊、使用较大尺寸元素或启用过渡缓动效果时，跳转现象会格外明显。
• 已尝试方案：使用JS过渡钩子、调整过渡相关配置，均未解决问题。放慢滑动动画速度可更清晰观察到跳转现象。

可行解决方案 #

1. 补偿CSS过渡偏移量 #

通过v-move类结合CSS变量，手动补偿缩放比例带来的位置偏差。假设面板缩放比例为0.8，示例代码如下：

.v-move {
  transition: transform 0.5s ease;
  /* 用calc基于缩放比例补偿偏移值 */
  transform: translateX(calc(var(--move-offset) / 0.8));
}

在组件中根据轮播方向和元素宽度，动态计算并设置--move-offset变量，确保偏移量符合缩放后的实际尺寸。

2. 切换缩放层级（容器替代元素缩放） #

避免直接缩放画廊面板，改为对整个画廊容器应用transform: scale()。这样Vue计算元素位置时，基于容器的原始尺寸进行计算，不会出现缩放导致的偏移错误：

.gallery-container {
  transform: scale(0.8);
  transform-origin: center;
}

3. 自定义JS过渡钩子计算真实位置 #

在过渡钩子中手动计算元素缩放后的真实尺寸，设置正确的初始和目标位置：

const beforeEnter = (el) => {
  const scaleRatio = 0.8;
  const { width } = el.getBoundingClientRect();
  const realWidth = width * scaleRatio;
  // 根据轮播方向设置初始偏移
  el.style.transform = `translateX(${isNext.value ? realWidth : -realWidth}px)`;
  el.style.opacity = '0';
};

const enter = (el, done) => {
  el.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
  el.style.transform = 'translateX(0)';
  el.style.opacity = '1';
  el.addEventListener('transitionend', done);
};

在transition-group中绑定这些钩子：

<transition-group
  tag="div"
  name="slide"
  @before-enter="beforeEnter"
  @enter="enter"
>
  <!-- 画廊面板元素 -->
</transition-group>

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