Vuetify默认轮播CSS选择器，以减少过渡时间

问题描述

我需要一个过渡，该过渡不会产生针对v轮播项目闪烁的可怕图像.理想情况下，它是平滑且快速的淡入淡出，适用于过渡和反向过渡.我已经尝试了所有内置到Vuetify的过渡以及几个自定义过渡，但没有任何效果.可以看到我的问题问题的代码笔，并在 GitHub Vuetify问题.

I need a transition that does not produce the dreaded image blinking for a v-carousel-item. Ideally it's a smooth and quick fade that would work for both transition and reverse-transition. I have tried all the transitions built in to Vuetify as well as a couple of custom ones but nothing works. My issue can be seenCodePen of the issue and in a reported at 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>

推荐答案

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

Here is a CSS workaround for the currently open issue:https://github.com/vuetifyjs/vuetify/issues/10809#issuecomment-629468386

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

这是一个具有解决方法的codepen ，位于垂直v-tabs内

这篇关于Vuetify默认轮播CSS选择器，以减少过渡时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！