我需要一个不会为 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>
最佳答案
这是针对当前未决问题的 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
内。
关于css - Vuetify 默认轮播 CSS 选择器,用于减少过渡持续时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62315211/