Vuetify.js - 动态卡高动画

Question

我在一张v卡内有两个段落(一大段和一个小段)，点击按钮即可打开。有没有办法让卡片在切换时像在扩展一样动画化。这是它的外观

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

假设show是 vue 对象中定义的变量。

Answer 1

你可以使用 Vuetify： https://vuetifyjs.com/en/framework/transitions#expand-transition 中的v-expand-transition。

只需使用一个包含短段落和长段落div的v-card-text，并将每个段落换成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>

代码沙箱的工作示例：https://codesandbox.io/s/stack-overflow-q46305305-4qq4940x5w