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.

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