подтвердить переход V-Flex - PullRequest
Новая
       14

подтвердить переход V-Flex

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

Я пытаюсь реализовать переход, как здесь пример кода , но с использованием Vuetify.

Я заметил, что добавление тега перехода перед компонентом v-flex разрушило порядок v-flex. В этом примере codesandbox существует два маршрута: один с переходом, другой без.

Компоненты имеют структуру: 

<v-container>
  <v-layout row wrap pb-2 pt-2>
  <!-- is transition group -->
  <transition-group name="cards" >
    <v-flex xs3
        v-for="card in items"
        :key="card"
        >
        <v-layout>
          <v-card>
            .....
          </v-card>  
        </v-layout>
      </v-flex>
    </transition-group>
  </v-layout>
</v-container>

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

Я не смог получить ответ Якоба Го на работу, поэтому я внёс некоторые коррективы в его ответ в качестве вдохновения и придумал это как решение. 

<template>
...
  <transition-group name="cards" tag="div" class="layout row wrap">
    ...
  </transition-group>
...
</template>

Установите для тега переходной группы значение div и назначьте ему соответствующие классы.

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

transition-group отображает фактический элемент: <span> по умолчанию. Так что есть дополнительные span между v-layout и v-flex. Это приводит к неисправности flexbox.

transition-group должен что-то визуализировать. Вы можете установить его на v-layout вместо span.

НО , transition-group имеет ограничение. Он может установить tag, но не может установить props. Итак, для row wrap pb-2 pt-2 вы должны добавить его вручную с помощью CSS.

изменить 

<template>
    ...
    <v-layout row wrap pb-2 pt-2>
        <transition-group name="cards">
            ...
        </transition-group>
    </v-layout>
    ...
</template>

до 

<template>
    ...
    <transition-group name="cards" tag="v-layout" class="manual-v-layout">
        ...
    </transition-group>
    ...
</template>


<style>
.manual-v-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-bottom: 8px !important;
  padding-top: 8px !important;
}
</style>

и это будет работать.

Демо: https://codesandbox.io/s/z2z5yoopol

...