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

Question

我需要一个不会为 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>

Answer 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 内。