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 seen
CodePen of the issue https://codepen.io/Magiczne/pen/xxGYxyZ and in a reported at GitHub Vuetify Issue https://github.com/vuetifyjs/vuetify/issues/10809.
<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 https://github.com/vuetifyjs/vuetify/issues/10809#issuecomment-629468386
.v-carousel .v-window-item {
position: absolute;
top: 0;
width: 100%;
}
这是一个代码笔 https://codepen.io/zed_at_home/pen/VweapGB?editors=1000使用解决方法,内部垂直v-tabs
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)