阻止 vue 轮播图像在加载时滑入答案

【问题标题】：stop vue carousel image from sliding in on load阻止 vue 轮播图像在加载时滑入
【发布时间】：2018-07-08 12:11:10
【问题描述】：

当我加载显示v-carousel 的页面时，它会通过从右向左滑动来加载图像。如下图所示。

我怎样才能摆脱这种滑动？我希望图像加载到位，当我单击按钮时，它会移动到下一张图像。

加载时：最初是白色的

然后通过从右向左滑动来加载图像。

【问题讨论】：

你检查过文档吗？ vuetifyjs.com/en/components/carousels#example-custom-transition
是的，但它们都是关于自定义过渡，过渡很好，但我只是不希望它在加载时发生。

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

如果您希望幻灯片没有任何过渡，这很简单，只需这样做：

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

【讨论】：

是的，但问题是，我不希望它在加载页面时发生，但我确实希望它在我单击转到下一个图像时发生。
@Otto 你有没有解决这个问题？遇到同样的问题。
@BalázsVincze 不，对不起！

【解决方案2】：

我不知道这是否正确，但这就是我解决问题的方法：

     <template>
        <v-carousel v-if="show"
          :cycle="cycle"
        >
          <v-carousel-item
            v-for="(item,i) in items"
            :key="i"
            :src="item"
          ></v-carousel-item>
        </v-carousel>
     <template>
     <script>
        export default {
          data () {
            return {
              cycle: false
            }
          }
        }
     </script>

【讨论】：

【解决方案3】：

这不是默认行为当您的轮播项目组件键入错误的方式时，可能会发生这种情况

例如：错误（每当图像 id 更改时将触发重新渲染）：

<v-carousel-item
   v-for="(productImage, index) in productImages"
   :key="productImage.id"
>

右：

<v-carousel-item
   v-for="(productImage, index) in productImages"
   :key="index"
>

【讨论】：