如何更改 v-carousel 滚动/幻灯片转换速度？答案

【问题标题】：How to change v-carousel scroll/slide transition speed?如何更改 v-carousel 滚动/幻灯片转换速度？
【发布时间】：2019-06-11 01:45:13
【问题描述】：

我正在使用带有一些图像的 v-carousel，我希望这些图像之间的幻灯片更慢/更流畅。

什么是优雅的方法？

<v-carousel interval="5000" :height="window.height - 48" hide-controls hide-delimiters>
                <v-carousel-item :src="congresso">
                </v-carousel-item>
                <v-carousel-item :src="stf">
                </v-carousel-item>
                <v-carousel-item :src="tse">
                </v-carousel-item>
</v-carousel>

【问题讨论】：

怎么了，只是增加间隔值-轮播将在该间隔后更改幻灯片-将“5000”（5秒）更改为“7000”（7秒）
你说的是点击next后图片变化的速度还是间隔时间过去了？
@depperm 我说的是幻灯片的过渡速度。不是间隔时间。
已经 7 个月了，我们还没有 Vuetify 实现的功能。伤心:(

标签： vue.js vuetify.js

【解决方案1】：

<b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="1000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >

我刚刚尝试过，它有效

interval 是这样写的：interval="nubmer" 它有：所以试着这样写：

【讨论】：

【解决方案2】：

将此添加到您的 variables.scss 文件中：

.v-window {
  &-x-transition,
  &-x-reverse-transition,
  &-y-transition,
  &-y-reverse-transition {
    &-enter-active,
    &-leave-active {
      transition: 1.1s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
    }
  }
}

更改转换变量中的第一个参数（此处为 1.1s）以设置整体速度。

*来自https://github.com/vuetifyjs/vuetify/issues/7476

【讨论】：

【解决方案3】：

我在 Vuetify’s transition helper function 的帮助下做到了这一点，它可以让您定义自己的过渡。

首先，如果您没有将variables.scss 文件添加到您的项目中，您必须在官方文档中的this link 的帮助下执行此操作。然后，您可以将自己的自定义过渡添加到该文件。这里我使用了vuetify原有的fade-transition，只改变了过渡时间：

/* the variables.scss file */

.new-transition {
&-leave-active {
  position: absolute;
}
&-enter-active, &-leave, &-leave-to {
  transition: 100ms; /* here you can define your desired time for transition */
}
&-enter, &-leave-to {
  opacity: 0
}
}

在您的 .vue file 之后，您可以使用 vuetify 的 createSimpleTransition 并将其注册到“mounted”挂钩中，如下所示：

<template>
<section>
    <v-carousel>
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.src"
      reverse-transition="new-transition"
      transition="new-transition"
    ></v-carousel-item>
  </v-carousel>
</section>
</template>

<script>
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition';

export default {
    name: 'Carousel',

    data () {
      return {
        items: [
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
          },
        ],
      }
    },
    mounted() {
        const newTransition = createSimpleTransition('new-transition');
        this.$once("hook:components", () => {
            newTransition
        })
        
    }
}
</script>

现在您可以使用在轮播中定义的new-transition，并且您在variables.scss 中设置的时间将影响轮播。

【讨论】：