Vuetify 默认轮播 CSS 选择器，用于减少过渡持续时间答案

【问题标题】：Vuetify default carousel CSS selectors, for transition duration reductionVuetify 默认轮播 CSS 选择器，用于减少过渡持续时间
【发布时间】：2020-09-30 13:19:44
【问题描述】：

我需要一个不会为 v-carousel-item 产生可怕的图像闪烁的过渡。理想情况下，它是一种平滑且快速的淡入淡出，适用于过渡和反向过渡。我已经尝试了 Vuetify 内置的所有转换以及一些自定义转换，但没有任何效果。可以看到我的问题 CodePen of the issue 并在 GitHub Vuetify Issue 报告。

<div id="app">
  <v-app>
    <v-carousel>
      <v-carousel-item
        v-for="(item,i) in items"
        :key="i"
        :src="item"
        reverse-transition="fade-transition"
        transition="fade-transition"
      ></v-carousel-item>
    </v-carousel>
  </v-app>
</div>

【问题讨论】：

您尝试过这种解决方法吗？ github.com/vuetifyjs/vuetify/issues/…
是的，我试过了，但问题是它让整个 v-carousel-item div 对我来说消失了。我认为这是因为我将它放在 v-tabs 内的 v-tabs 中，因此位置绝对参数与图像的显示位置混淆。
这很奇怪。此解决方法针对生成的.v-window-item 类元素，它们位于.v-carousel 类元素内。使用absolute 位置，它应该捕捉到第一个定位（非静态）的祖先元素，即 v-carousel 本身。你能在应用 CSS 后截取你的 DOM 和样式吗？
在这里。显示设置为none是否正常，也许这就是问题所在。
height="auto" 破坏它，删除它。 v-model 可能不需要，因为 cycle 属性可以处理。看看我更新的笔：codepen.io/zed_at_home/pen/VweapGB?editors=1000

标签： css vue.js vuejs2 css-selectors vuetify.js

【解决方案1】：

以下是针对当前未解决问题的 CSS 解决方法： https://github.com/vuetifyjs/vuetify/issues/10809#issuecomment-629468386

.v-carousel .v-window-item {
  position: absolute;
  top: 0;
  width: 100%;
}

Here is a codepen 带有解决方法，在垂直 v-tabs 内。

【讨论】：

天啊，你说的自动高度打破了它是对的，但是我该如何响应地适应图像呢？有没有办法让它自动调整？