vuetify.js

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)

Solution

  • 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