javascript - 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”并向 transition-group 类添加“layout row wrap”。

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