v-flex 的 vuetify 过渡

Question

我正在尝试像这里 codepen example 那样实现转换，但使用的是 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> 

Answer 1

transition-group 呈现一个实际的元素：默认情况下为 <span>。所以在v-layout 和v-flex 之间多了一个span。这会导致 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

Answer 2

我无法让 Jacob Goh 的答案发挥作用，所以我以他的答案为灵感做了一些调整，并想出了这个作为解决方案。

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

将 transition-group 标签设置为 div 并为其分配适当的类。