<img :src="list[currentIndex].img" alt=""> 每次src变化时增加图片向右滑动的过渡

在Vue.js中，`<img>`标签配合v-bind指令`:src`用于动态绑定图片源。当你想要在每次图片源（`list[currentIndex].img`）变化时添加一个动画效果，比如图片从左到右或者向右滑动，你可以使用CSS动画或者Vue的过渡（transitions）。这里是一个简单的例子：

首先，在CSS部分，创建一个名为`.image-transition`的选择器，并设置滑动方向和动画时间：

.image-transition {
  transition: transform 0.5s ease; /* 动画持续时间为0.5秒，缓动函数可以调整为所需的平滑度 */
}

.image-transition.right-enter-active,
.image-transition.right-leave-active {
  transform: translateX(-100%); /* 图片初始位置在左边，离开时向右移动100%的距离 */
}

.image-transition.right-enter,
.image-transition.right-leave-to {
  transform: translateX(0); /* 当图片滑入或滑出完成时，它会回到正常的位置 */
}

然后，在HTML和Vue模板中应用这个类：

<img :src="list[currentIndex].img"
   class="image-transition right-enter right-leave-to"
   @load="onImageLoad(currentIndex)">

并编写对应的JavaScript方法`onImageLoad`：

methods: {
  onImageLoad(index) {
    this.currentIndex = index;
  }
},

当`currentIndex`改变时，图片会触发`load`事件，这时Vue会自动添加和移除`.right-enter`和`.right-leave-to`类，使得图片按照预设的动画效果向右滑动。