Animation Vuetify.js-动态卡高度动画

我有两个段落（一个大的和一个小的）在一个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对象中定义的变量。

您可以使用Vuetify:中的

v-expand-transition

只需使用一个

v-card-text

包含一个

div

的短段落和长段落，并将每个段落包装成

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>

这是一小段
卢昂

段落

代码沙盒上的工作示例：