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

Question

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

我缩短了 link 因为我得到一个错误所以没有让我 post 它我把代码的重要部分放在代码笔中：

https://rb.gy/gw6xws

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

Answer 1

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

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

<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

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

How to make expand transition of v-card every time I press a button

transition

vue.js

vuejs2

v-for

vuetify.js