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.
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