vue2项目点击图片时实现左右切换滑动效果，纯css动画

在 Vue2 项目中，为了实现点击图片时的左右切换滑动效果，你可以利用 CSS 的 `@keyframes` 规则以及伪元素 `:before` 和 `:after` 来创建动画。首先，你需要创建两个状态的 keyframe 定义，一种是初始位置，另一种是目标位置。

HTML 结构可以像这样：

<div class="slider">
  <img src="image1.jpg" :src="currentImage" @click="changeSlide">
  <div class="slider-indicators">
    <span v-for="i in images" :class="{ active: i === currentImageIndex }"></span>
  </div>
</div>

CSS 代码示例：

.slider {
  position: relative;
  overflow: hidden;
}

.slider img {
  transition: transform 0.5s ease-in-out;
}

.slider img:before,
.slider img:after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  animation-name: slide;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes slide {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    transform: translateX(-100%);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

.slider img:hover {
  cursor: pointer;
}

.slider-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}

JavaScript 部分（Vue组件内）：

data() {
  return {
    currentImage: 'image1.jpg', // 当前显示的图片
    images: ['image1.jpg', 'image2.jpg'], // 所有图片路径数组
    currentImageIndex: 0, // 当前图片索引
  };
},
methods: {
  changeSlide(e) {
    this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length; // 切换到下一个图片
    this.currentImage = this.images[this.currentImageIndex];
  },
}

当你点击图片时，会触发 `changeSlide` 方法，改变当前图片并更新对应的 CSS 动画。同时，指示器也会相应地切换活跃状态。