如何实现Vuetify轮播组件前后项同方向滑动切换？

你之前用reverse-transition没效果，是因为这个属性是用来反转单个轮播项自身的过渡方向，而非控制轮播整体的上/下一项切换过渡逻辑。Vuetify轮播默认prev（上一项）用slide-x-reverse-transition、next（下一项）用slide-x-transition，两者方向相反。要实现前后切换同方向滑入，只需给v-carousel统一设置prev-transition和next-transition为同一个过渡即可。

实现代码 #

所有切换均从左侧滑入 #

<template>
  <v-app>
    <v-container>
      <v-carousel
        prev-transition="slide-x-reverse-transition"
        next-transition="slide-x-reverse-transition"
      >
        <v-carousel-item
          v-for="i in 5"
          :key="i"
          src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
          cover
        ></v-carousel-item>
      </v-carousel>
    </v-container>
  </v-app>
</template>

所有切换均从右侧滑入 #

<template>
  <v-app>
    <v-container>
      <v-carousel
        prev-transition="slide-x-transition"
        next-transition="slide-x-transition"
      >
        <v-carousel-item
          v-for="i in 5"
          :key="i"
          src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
          cover
        ></v-carousel-item>
      </v-carousel>
    </v-container>
  </v-app>
</template>

关键说明 #

• prev-transition：指定点击“上一项”时的过渡动画
• next-transition：指定点击“下一项”时的过渡动画
• 把两个属性设为相同的过渡名称，就能让前后切换的新元素从同一方向滑入
• 若需要自定义动画效果，可以创建Vue过渡组件，替换上述的过渡名称即可

内容的提问来源于stack exchange，提问作者Anisur Rahman