CODEWITHSUNDEEP
vuejs2vuetify.js
DrSensor
DrSensor

Reputation: 496

How to set attributes or props in `transition-group`

How can I set props or attributes in Vuejs transition-group? For example, I have this snippet

<v-layout :row="true" wrap>
  <v-card v-for="(file, id) in files" :key="id">
   ... 
  </v-card>
</v-layout>

Then I want to animate the transition in a list of cards, so can I transform it into this?

<transition-group name="card-in-out" tag="v-layout" :row="true" wrap>
  <v-card v-for="(file, id) in files" :key="id">
   ... 
  </v-card>
</transition-group>

Upvotes: 3

Views: 1226

Answers (1)

jordanw
jordanw

Reputation: 1505

Based on the API for the transition-group, there doesn't seem to be a way to pass in props. As the tag prop is only there to change the name for the transition-group when it's placed on the DOM. I would just wrap the entire transition-group with <v-layout row wrap>

<v-layout row wrap>
 <v-flex xs12>
   <transition-group name="card-in-out">
    <v-card  
     v-for="item in items"
     :key="item" 
     class="list-item"
    >
    <v-card-title primary-title>
      <div class="headline">Card Title {{ item }}</div>
    </v-card-title>
    </v-card>
  </transition-group>
 </v-flex>
</v-layout>

Upvotes: 2

Related Questions