Vuejs 2.4过渡组调整问题与vuetify

Question

首先，我必须提到我在前端不是很好，但我花了很多时间试图解决这个问题，所以请不要对我这么努力。

这是我的问题，我正在使用Vuejs和vuetify来创建列表应用程序的前端。

我遇到问题的组件应该使用下图中的左右箭头水平列出项目。

这是组件的代码

while

转换代码正常工作，但在应用转换时，它会更新呈现的元素的大小 这是列表的图片，未应用转换（评论标记）

应用转换后，这是相同的图片

正如你所看到的那样，右边有一个偏移，图像大小调整了，我不知道如何修复它。

Answer 1

transition-group默认情况下呈现元素，因此我所做的就是将标记更改为“ div”，并​​将“ layout row wrap”添加到了transition-group类。

  <transition-group
        name="item-transition"
        tag="div"
        class="layout row wrap"
        enter-active-class="animated bounceIn"
        leave-active-class="animated bounceOut"
      >
    <v-flex xs12 sm6 lg4 v-for="item in items" :key="item.id">
      <v-card>
        {{item}}
      </v-card>`enter code here`
    </v-flex>
  </transition-group>