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

Question

I'm making a form where user press the button and new v-card shows. Everything works but I can't make a good expand transition. It only works with the first card then it tells me to use transition-group. But when I use transition-group I don't get any animation at all. I tried a lot of things and look at the vue documentation.

I shorten the link because I get an error and SO didn't let me post it I put an important part of my code in codepen:

https://rb.gy/gw6xws

Anyone know the solution how to make expand-transition for every added card because now it works only for the first one?

Answer 1

First, you should move v-for directive to v-expand-transition.

Then you can use appear to trigger the animation when you add new 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