每次按下按钮时如何进行v-card的扩展过渡

【问题标题】：How to make expand transition of v-card every time I press a button每次按下按钮时如何进行v-card的扩展过渡
【发布时间】：2021-01-23 11:52:50
【问题描述】：

我正在制作一个表单，用户按下按钮并显示新的 v-card。一切正常，但我无法进行良好的扩展过渡。它只适用于第一张卡，然后它告诉我使用转换组。但是当我使用过渡组时，我根本没有得到任何动画。尝试了很多东西，看vue文档。

我缩短了链接，因为我收到一个错误，所以没有让我发布它我把我的代码的重要部分放在了codepen中：

https://rb.gy/gw6xws

任何人都知道如何为每张添加的卡进行扩展转换的解决方案，因为现在它只适用于第一张卡？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js transition v-for

【解决方案1】：

首先，您应该将v-for 指令移动到v-expand-transition。

然后你可以在添加新的v-expand-transition时使用appear触发动画。

<v-expand-transition appear v-for="klad in kladi" :key="klad.key">
  <v-card class="pl-3 pr-3 mt-2 mb-2 rounded-lg tertiary">
    <v-container>
      <v-layout row wrap>
        <v-flex xs12 sm6>
          <p>something {{klad.key}}</p>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>
</v-expand-transition>

Example

【讨论】：

感谢您的帮助。我也试过 move v-for in v-expand-transition 但我不知道出现。谢谢，这正是我正在寻找的