轮播方向切换导致卡片遮挡的问题

/**
 * 监听 direction 和 effect 的变化 
 * @description 
 * 作用：当 direction 和 effect 变化时，更新过渡时间。
 * 原因：当 direction 变化时，卡片的位置会根据新的方向重新计算。
 *      「上一张卡片」 和 「下一张卡片」 切换到新的位置的过渡过程可能会遮挡到当前卡片，所以需要将过渡时间设置为 0。
 *      当 effect 变化时, 卡片的位置也可能会随之产生变化。
 *      特别是涉及到 fade 效果与其他效果切换的时候，卡片的位置、透明度和 z-index 属性都需要重新进行计算。
 *      「下一张卡片」 切换到新的位置的过渡过程可能会掠过当前卡片，所以也需要将过渡时间设置为 0。
 *      当卡片位置调整过后需要重新将过渡时间设置为 transitionStyle 以保证正常的过渡效果。
 * 目的：保证过渡效果的正常进行。
 * 注意：为什么用 setTimeout 不用 nextTick？
 *      使用 nextTick 会导致「下一张卡片」 切换到新的位置的过渡过程可能会掠过当前卡片。
 *      所以需要使用 setTimeout 来保证过渡效果的正常进行。
 */
watch(
  () => [direction.value, effect.value],
  () => {
    transition.value = '0';
    setTimeout(() => {
      transition.value = transitionStyle.value;
    }, 0);
  }
);