Vuetify.js - dynamic card height animation

Question

I'm having two paragraphs (one big and one small) inside a v-card which switches on button click. Is there a way to make the card animate as if it is expanding while switching. Here is how it looks

<v-card>

   <v-btn @click="show=!show" flat>show</v-btn>

   <v-card-text v-show="show">
      <!-- short paragraph -->
   </v-card-text>

   <v-card-text v-show="!show">
       <!-- long paragraph -->
   </v-card-text>

</v-card>

Assume show is a variable defined in vue object.

Answer 1

You can use v-expand-transition from Vuetify: https://vuetifyjs.com/en/framework/transitions#expand-transition.

Just use one v-card-text containing a div for each the short and the long paragraph and wrap each into v-expand-transition

    <v-card-text>
      <v-expand-transition>
        <div v-show="show">This is a short paragraph</div>
      </v-expand-transition>
      <v-expand-transition>
        <div v-show="!show">
          <p>A looooong</p>
          <p>paragraph</p>
        </div>
      </v-expand-transition>
    </v-card-text>

Working example on Code Sandbox: https://codesandbox.io/s/stack-overflow-q46305305-4qq4940x5w