CODEWITHSUNDEEP
cssvue.jsvuejs2css-selectorsvuetify.js
Curious
Curious

Reputation: 401

Vuetify default carousel CSS selectors, for transition duration reduction

enter image description hereenter image description hereI 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 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>

Upvotes: 3

Views: 1510

Answers (1)

Zed Home
Zed Home

Reputation: 206

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%;
}

Here is a codepen with the workaround, inside vertical v-tabs.

Upvotes: 3

Related Questions