vuejs2 - 如何在 `transition-group` 中设置属性或 Prop

Question

如何在 Vuejs transition-group 中设置 Prop 或属性？例如，我有这个片段

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

然后我想在卡片列表中制作动画过渡，那么我可以将它转换成这个吗？

<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>

Answer 1

基于 transition-group 的 API ，似乎没有办法传入 Prop 。作为tag prop 仅用于在将过渡组放置在 DOM 上时更改其名称。我会用 <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>