Vue 3 Transition-group 和 CSS 缩放问题

Question

我正在使用 Vue 3 转换组制作一个可点击的动画画廊。 一切工作正常，除了当画廊幻灯片从一侧移动到另一侧时有一个小跳跃，我已将其缩小为缩放画廊面板的问题，因为 vue 没有考虑移动项目时的额外距离。这可以在下面的示例中看到。

这似乎是一个无关紧要的问题，但与非缩放画廊相比，它变得非常明显，并且对于较大的项目以及过渡缓和来说非常明显。

有办法解决这个问题吗？我尝试过 js 转换钩子以及更改转换的每个部分都无济于事。

示例

这里有一个问题的例子，你可以放慢幻灯片动画以便更清楚地看到跳跃。

play.vuejs 示例

Answer 1

这与 Vue 如何处理

<transition-group>

内缩放元素的过渡有关，它使用“翻转”技术来确定元素的开始和结束位置，并在它们之间应用“平滑”过渡。当涉及缩放时，边界框的大小和位置会发生变化，这可能会扰乱 Vue 的内部计算。

为了解决这个问题，您可以尝试利用 Vue 的转换钩子和一些手动计算来尝试更平滑的转换。然而，您的里程可能会有所不同。

1. 使用

   beforeEnter

   、

   enter

   和

   afterEnter

   挂钩来调整元素的过渡。
2. 通过考虑比例的手动计算覆盖默认转换数据。

集成挂钩

首先，您需要将钩子集成到

ClickGallery

组件中。我将提供一个通用的示例。

methods: {
  beforeEnter(el) {
    // Get initial position (before entering)
    const rect = el.getBoundingClientRect();
    el.dataset.initialTop = rect.top;
    el.dataset.initialLeft = rect.left;
  },
  enter(el, done) {
    // Get the final position (once it has entered)
    const finalRect = el.getBoundingClientRect();

    // Determine the distances for the transition
    const dx = el.dataset.initialLeft - finalRect.left;
    const dy = el.dataset.initialTop - finalRect.top;

    // Apply a reverse transition to the element (this will be the starting point)
    el.style.transform = `translate(${dx}px, ${dy}px) scale(0.9)`; // Assuming 0.9 is the scale factor

    // On the next frame, transition the element back to its natural position
    requestAnimationFrame(() => {
      el.style.transform = '';
      done();
    });
  },
  afterEnter(el) {
    el.style.transform = ''; // Clear the transform for good measure
  }
}

现在，将这些钩子包含在

transition-group

中

<transition-group
  name="slide-fade"
  tag="div"
  :before-enter="beforeEnter"
  :enter="enter"
  :after-enter="afterEnter"
>
  <!-- gallery items here -->
</transition-group>

通过这种方法，我们手动确定元素的开始和结束位置，包括其比例，并在开始时应用反向过渡。这给出了元素从起始位置滑动到最终位置的效果，但我们手动计算了比例。

Vue 的内部机制可能仍会尝试处理转换，因此您可能需要进行一些尝试才能获得您想要的确切效果。不过，这应该会让您朝着正确的方向开始。

希望这有帮助！