Vue中transition过渡动画，出现两个页面同时出现的问题解决方法（从左往右，淡入淡出过渡动画）

在Vue中，如果你遇到了使用transition过渡时出现两个页面同时出现的问题，通常是因为你没有正确使用<transition>元素或者是你的样式有问题。

解决方法：

1. 确保你的<transition>元素包裹的是单个根元素。
2. 确保你的过渡样式是针对这个单个根元素设计的，而不是同时作用于两个页面。
3. 如果你是在路由切换时遇到这个问题，确保你使用的是Vue Router，并且正确配置了<router-view>。

以下是一个简单的例子，展示如何在Vue中使用transition：

<template>
  <div id="app">
    <!-- 确保只有一个根元素被transition包裹 -->
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>
 
<style>
  /* 定义过渡样式 */
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
  }
</style>

确保你的路由配置也是正确的，例如：

const routes = [
  {
    path: '/page1',
    component: Page1
  },
  {
    path: '/page2',
    component: Page2
  },
  // ...其他路由
];
 
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});

如果你遵循了以上步骤还是遇到问题，请检查你的具体代码，确保没有其他样式或者布局问题导致两个页面同时显示。