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

<div class="header"> this is content of header </div> <div class="content-inner"> <!-- Apply dynamic height to this div by calculating header and footer height --> </div> <div class="footer"> footer content </div>呈现实际元素：默认为transition-group。因此<span>和span之间还有v-layout。这会导致flexbox出现故障。

v-flex必须渲染一些内容。您可以将其设置为呈现transition-group而不是v-layout。

但，span有限制。它可以设置transition-group但不能设置tag。因此，对于props，您必须使用CSS手动添加它。

更改

row wrap pb-2 pt-2

到

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

它会起作用。

演示：https://codesandbox.io/s/z2z5yoopol

Answer 2

我无法获得Jacob Goh的答案，因此我以他的答案为灵感进行了一些调整，并提出了解决方案。

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

将过渡组标签设置为div并为其分配适当的类。