vue.js - v-flex 的 vuetify 过渡
问题描述
我正在尝试像这里的codepen 示例那样实现转换,但使用 Vuetify。
我注意到在 v-flex 组件之前添加转换标签会破坏 v-flex 订单。在这个示例代码框中,有两条路线,一条有过渡,另一条没有。
组件具有以下结构:
<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>
解决方案
transition-group
呈现一个实际的元素:<span>
默认情况下是 a。所以和span
之间有一个额外的。这会导致 flexbox 发生故障。v-layout
v-flex
transition-group
必须渲染一些东西。您可以将其设置为 renderv-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>
它会起作用的。
推荐阅读
- javascript - JavaScript 事件函数在每个页面加载时运行一个
- django - 外键字段名后跟_id
- visualization - 从 Gameboy Printer Spoof 重建串行图像数据
- swift - 从数据库加载数据并将其加载到 Vapor 3 中的视图的正确方法?
- ios - 通知 ios 上的自定义音频播放器控件
- bazel - Bazel-如何获取目标的所有传递源
- ios - 我如何将 NSRangeException 解决为 swift 4?
- python - 将scrapy项目导出到不同的文件
- opengl-es-2.0 - 开启深度测试,还是不行?
- ruby-on-rails - Rails 说没有路线匹配,但我在“rake 路线”中看到它