请首先我必须提到我在前端不是很好，但我花了很多时间试图解决这个问题，所以请不要对我太苛刻。
这是我的问题，我使用 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>
转换代码正常工作，除了在应用转换时它会更新呈现的元素的大小
这是未应用转换的列表图片（评论标签）
这是应用过渡后的同一张图片
如您所见，右侧有一个偏移量，并且图像的大小被缩小了，我不知道如何修复它。