每次按下按钮时如何进行v卡的扩展转换

问题描述

我正在制作一个表单，其中用户按下按钮，然后显示新的v卡。一切正常，但我无法进行良好的扩展过渡。它仅适用于第一张卡，然后告诉我使用过渡组。但是，当我使用过渡组时，我根本看不到任何动画。我尝试了很多事情，并查看了vue文档。

我缩短了链接，因为出现错误，所以没有让我发布它 我将代码的重要部分放在了代码笔中：

https://rb.gy/gw6xws

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

解决方法

首先，您应将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