Vuejs 2.4过渡组调整问题与vuetify

Question

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

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

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

这是组件的代码

<template>
<div>
    <v-layout class="mt-5">
      <v-flex md8>
      <h2 class="text-md-left ml-2">Place related to {{tagName}}</h2>
      </v-flex>
      <v-spacer></v-spacer>
      <v-flex md4>
        <h2 class="text-md-right">
        <v-btn icon v-show="true" @click="nextLeft">
        <v-icon>arrow_left</v-icon>
        </v-btn>
        <v-btn icon v-show="true" @click="nextRight">
        <v-icon>arrow_right</v-icon>
        </v-btn>
        </h2>
      </v-flex>
    </v-layout>
    <v-layout fluid>
      <transition-group name="list-slide">
      <v-flex xs12 md4 v-for="place in places" :key="place.id" class="list-slide-item" tag="div">
        <v-card class="mr-2 ml-2 mt-2">
          <v-card-media :src="place.picture" height="180px">
          </v-card-media>
          <v-card-title primary-title>
            <div>
              <h4 class="headline mb-0">{{ place.name }}</h4>
              <div> {{ place.description }}</div>
            </div>
          </v-card-title>
          <v-card-actions>
            <v-btn flat color="teal">Share</v-btn>
            <v-btn flat color="teal">Explore</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
      </transition-group>
  </v-layout>
</div>
</template>

<script>
export default {
  props: ['tagName'],
  data () {
    return {
      hasLeft: false, // True if there are some elements that are already been displayed
      hasRight: true, // True if there are some elements to display in right
      pageNumber: 1, // The page number on dataset we are currently on
      bufferEnded: false, // While bufferEnded is True and fetching the API still returns results
      places: [
        {
          name: 'Luna park obala',
          id: 1,
          description: "Luna park dans la ville d'obala",
          picture: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-yl-Ve7691Xp1ydOs8uxP78wt3xvfsJEVJt4vMe8FZMZHnUt6KQ'
        },
        {
          name: 'Luna park obala',
          id: 2,
          description: "Luna park dans la ville d'obala",
          picture: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT88qzjKE_X8nS97t-K4z10h6iOSBFjB4YRB_U2DtloUTtoaYpAtA'
        },
        {
          name: 'Luna park obala',
          id: 3,
          description: "Luna park dans la ville d'obala",
          picture: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLFZUJQ62W_jdyuwpd9A7nqLlIgVgebgHxdaDDL9MF-ih9_p7L'
        }

      ],
      bufferLeft: [],
      bufferRight: [
        {
          name: 'Luna park obala',
          id: 4,
          description: "Luna park dans la ville d'obala",
          picture: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-yl-Ve7691Xp1ydOs8uxP78wt3xvfsJEVJt4vMe8FZMZHnUt6KQ'
        },
        {
          name: 'Luna park obala',
          id: 5,
          description: "Luna park dans la ville d'obala",
          picture: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT88qzjKE_X8nS97t-K4z10h6iOSBFjB4YRB_U2DtloUTtoaYpAtA'
        },
        {
          name: 'Luna park obala',
          id: 6,
          description: "Luna park dans la ville d'obala",
          picture: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLFZUJQ62W_jdyuwpd9A7nqLlIgVgebgHxdaDDL9MF-ih9_p7L'
        },
        {
          name: 'Luna park obala',
          id: 7,
          description: "Luna park dans la ville d'obala",
          picture: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLFZUJQ62W_jdyuwpd9A7nqLlIgVgebgHxdaDDL9MF-ih9_p7L'
        },
        {
          name: 'Luna park obala',
          id: 8,
          description: "Luna park dans la ville d'obala",
          picture: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLFZUJQ62W_jdyuwpd9A7nqLlIgVgebgHxdaDDL9MF-ih9_p7L'
        }

      ]
    }
  },
  methods: {
    nextRight: function () {

    },
    nextLeft: function () {
      var previousFirstPlace = this.places.shift()
      this.bufferLeft.push(previousFirstPlace)
      var newLastPlace = this.bufferRight.shift()
      this.places.push(newLastPlace)
    }
  }
}
</script>

<style>

.list-slide-item {
  transition: all 1s;
  display: inline-block;
}

.list-slide-enter, .list-slide-leave-to
/* .list-complete-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateX(-30px);
}
.list-slide-leave-active {
  position: absolute;
}
</style>

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

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

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

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>