Vuejs 2.4 проблема изменения размера переходной группы с vuetify - PullRequest
Новая
       37

Vuejs 2.4 проблема изменения размера переходной группы с vuetify

0 голосов
/ 15 мая 2018

Пожалуйста, прежде всего, я должен отметить, что я не очень хорошо разбираюсь в интерфейсе, но я потратил много времени, пытаясь решить эту проблему, поэтому, пожалуйста, не усердствуйте со мной.

Это моя проблема. Я использую 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>

Код перехода работает правильно, за исключением того, что при применении перехода он обновляет размер отображаемых элементов. Это изображение листинга без применения перехода (тег комментария) enter image description here

Это то же изображение после применения перехода enter image description here

Как вы можете видеть, смещение вправо и размеры изображений уменьшены, я не знаю, как это исправить.

1 Ответ

0 голосов
/ 16 апреля 2019

transition-group отображает элемент по умолчанию, поэтому я изменил тег на «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>
...