CODEWITHSUNDEEP
vuetify.js
Artur Siwiak
Artur Siwiak

Reputation: 442

Expand Transition is not smooth

I have a problem with strange behavior for expand transition. Transition is not smooth for some reason. It stops for a moment before disappearing - just like:

Not smooth transition

Template is as simple as

<template>
  <v-expand-transition>
    <v-alert
      v-if="visible"
      prominent
      type="error">
      <v-row align="center">
        <v-col class="grow">
          {{message}}
        </v-col>
        <v-col class="shrink">
          <v-btn @click="invoke">{{button}}</v-btn>
        </v-col>
      </v-row>
    </v-alert>
  </v-expand-transition>
</template>

How to fix it? I'm on latest stable chrome for windows (83.0.4103.61 x64)

Upvotes: 4

Views: 2315

Answers (3)

Dawid Lewandowski
Dawid Lewandowski

Reputation: 43

I had similar issue with not smooth transition. For me it was padding, i had to remove padding from first child of v-expand-x-transition which was a div, and move it one level lower so to nav. (i use tailwind p-4 stands for padding)

<v-expand-x-transition>
  <div
      v-show="isLargeScreen || isSidebarOpenOnMobile"
      class="fixed inset-y-0 left-0 w-64 bg-base-100 shadow-lg lg:relative lg:block"
  >
    <nav class="space-y-4 p-4">
      [rest_code...]
    </nav>
  </div>
</v-expand-x-transition>

Upvotes: 0

miltonbhowmick
miltonbhowmick

Reputation: 481

If someone use v-show=visible, it will not smoothly collapse that box. Though vuetify transition docs uses v-show in the first example. v-if is suggested to use for smooth transition in vuetify expand component.

Appreciated to @ssc-hrep3 answer!

Upvotes: 0

Artur Siwiak
Artur Siwiak

Reputation: 442

As @ssc-hrep3 mentioned in comments the code should look like:

  <v-expand-transition>
    <div v-if="visible">
      <v-alert
        prominent
        type="error">

And that's it

Upvotes: 3

Related Questions