Question

我尝试渲染我应用<el-card>的{{1}}项列表。我有一个后面和前面transition-group，当点击一个按钮时会翻转。

为了让翻转过渡看起来不错，我需要这些卡片才能拥有这种风格：<el-card>但问题是所有的卡都堆叠了。

如果我删除此样式，则所有卡片并排显示，但翻转效果会产生不良行为：position: absolute; top: 0; left: 0项目在back项目下可见。

你可以找到一个例子here。

我正在寻求一些帮助来解决这个问题。

谢谢。

迈克尔

Answer 1

这是因为卡的所有前后元素相对于<body> 元素的位置绝对。没有父母有position: relative，所以他们当然都会出现在页面的坐标（0,0）。

你想要的是在父元素上实际使用position: relative，理想情况是在每张卡片级别。为了方便选择，给父母一个班级：

<div class="card" v-for="card in cards" v-bind:key="card">

然后您为父级分配固定的宽度和高度（180px，因为您已经为卡片的正面/背面定义了相同的宽度和高度），并指定{{1}对它：

position: relative

概念验证修正：https://codesandbox.io/s/xjq08j5n1p

旁注：你仍然会意识到你的例子仍然破碎，因为翻转卡会翻转全部卡片。这是因为您将翻转状态存储在父应用程序实例上，而不是存储在各个卡级别上。我建议您为每张卡创建一个子组件，以便您可以单独存储其翻转状态。

Answer 2

Terry's answer很有意义。我只想添加完整的工作功能示例。

由于您已经声明了.flipper类，我使用它来添加position:relative块：

.flipper {
  position: relative;
  width: 180px;
  height: 180px;
}

请记住，要使position:relative生效，必须设置尺寸。否则，由于.flipper内部没有流入元素，因此其大小将为0.

另外，设置孩子的适当宽度

.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
}

我们需要100%，因为我们已经在父级上设置了宽度。

我将flipCards转换为布尔数组，并修改了flipCardSwitch函数。

flipCardSwitch: function(index) {
  // needed because of https://vuejs.org/v2/guide/list.html#Caveats
  this.$set(this.flipCard, index, !this.flipCard[index]);
}

当然，您需要更新on-click。

@click="flipCardSwitch(i)"

工作代码： https://codesandbox.io/s/71512v9qvx

VueJS（元素UI） - ＆gt; v-for中相对div的绝对定位div

2 个答案: