Javascript Vuejs 2.4使用vuetify调整过渡组大小的问题

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

这是我的问题，我正在使用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>

与{{tagName}}相关的位置
左箭头
向右箭头
{{place.name}
{{place.description}}
分享
探索
导出默认值{
道具：[“标记名”]，
数据（）{
返回{
hasLeft:false，//如果已经显示了某些元素，则为True
hasRight:true，//如果右侧有一些要显示的元素，则为true
页码：1，//我们当前所在的数据集上的页码
bufferEnded:false，//虽然bufferEnded为True，但获取API仍会返回结果
地点：[
{
名称：“卢娜公园奥巴拉”，
id:1，
描述：“卢纳公园丹斯奥巴拉镇”，
图片：'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-yl-Ve7691Xp1ydOs8uxP78wt3xvfsJEVJt4vMe8FZMZHnUt6KQ'
},
{
名称：“卢娜公园奥巴拉”，
id:2，
描述：“卢纳公园丹斯奥巴拉镇”，
图片：'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT88qzjKE_X8nS97t-K4z10h6iOSBFjB4YRB_2DTLouttoyaypata'
},
{
名称：“卢娜公园奥巴拉”，
id:3，
描述：“卢纳公园丹斯奥巴拉镇”，
图片：'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLFZUJQ62W_jdyuwpd9A7nqLlIgVgebgHxdaDDL9MF-ih9_p7L'
}
],
bufferLeft:[]，
权利：[
{
名称：“卢娜公园奥巴拉”，
id:4，
描述：“卢纳公园丹斯奥巴拉镇”，
图片：'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-yl-Ve7691Xp1ydOs8uxP78wt3xvfsJEVJt4vMe8FZMZHnUt6KQ'
},
{
名称：“卢娜公园奥巴拉”，
id:5，
描述：“卢纳公园丹斯奥巴拉镇”，
图片：'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT88qzjKE_X8nS97t-K4z10h6iOSBFjB4YRB_2DTLouttoyaypata'
},
{
名称：“卢娜公园奥巴拉”，
id:6，
描述：“卢纳公园丹斯奥巴拉镇”，
图片：'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLFZUJQ62W_jdyuwpd9A7nqLlIgVgebgHxdaDDL9MF-ih9_p7L'
},
{
名称：“卢娜公园奥巴拉”，
id:7，
描述：“卢纳公园丹斯奥巴拉镇”，
图片：'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLFZUJQ62W_jdyuwpd9A7nqLlIgVgebgHxdaDDL9MF-ih9_p7L'
},
{
名称：“卢娜公园奥巴拉”，
id:8，
描述：“卢纳公园丹斯奥巴拉镇”，
图片：'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLFZUJQ62W_jdyuwpd9A7nqLlIgVgebgHxdaDDL9MF-ih9_p7L'
}
]
}
},
方法：{
nextRight：函数（）{
},
nextLeft:函数（）{
var previousFirstPlace=this.places.shift（）
this.bufferLeft.push（先前的第一名）
var newLastPlace=this.bufferRight.shift（）
this.places.push（newLastPlace）
}
}
}
.列出幻灯片项目{
过渡：所有1；
显示：内联块；
}
.列表幻灯片进入，.列表幻灯片离开
/*.在版本2.1.8*下列出完整的保持活动状态*/{
不透明度：0；
转换：translateX（-30px）；
}
.列表幻灯片保持活动状态{
位置：绝对位置；
}

转换代码正常工作，但应用转换时，它会更新渲染元素的大小
这是一张列表图片，没有应用转换（注释标记）

这是应用转换后的同一张图片

---

正如您所看到的，右侧有一个偏移，图像的大小被缩小，我不知道如何修复它。

默认情况下，过渡组渲染元素，因此我所做的是将标记更改为“div”，并将“布局行环绕”添加到过渡组类中

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

{{item}}
`在这里输入代码`

有点晚了，但这听起来似乎与您的问题有关，实际上对我的用例有效。