vue左右滑动切换页面带上动画

在Vue中实现左右滑动切换页面并带有动画效果，可以使用vue-awesome-swiper插件。以下是一个简单的例子：

1. 首先安装vue-awesome-swiper：

npm install vue-awesome-swiper --save

2. 在Vue组件中使用vue-awesome-swiper：

<template>
  <swiper :options="swiperOptions">
    <swiper-slide>
      <div class="slide-content">页面1</div>
    </swiper-slide>
    <swiper-slide>
      <div class="slide-content">页面2</div>
    </swiper-slide>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>
 
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
 
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        // 动画选项
        effect: 'slide', // 切换效果，默认是slide
        speed: 500, // 切换速度
        // 其他配置项...
      }
    };
  }
};
</script>
 
<style>
.slide-content {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在这个例子中，我们使用了vue-awesome-swiper的swiper组件和swiper-slide组件来创建滑块，并通过options属性配置了动画效果。你可以根据需要调整effect属性来更改动画类型，例如改为fade实现淡入淡出效果。