VueJS (Element UI) -> v-for 上的相对 div 中的绝对定位 div

Question

我尝试呈现 <el-card> 个项目的列表，我对其应用了 transition-group。我有一个前后 <el-card> 在单击按钮时翻转。

为了让翻转过渡看起来不错，我需要卡片具有这种样式：position: absolute; top: 0; left: 0但问题是所有卡片都是堆叠的。

如果删除此样式，所有卡片都会并排显示，但翻转效果会出现不需要的行为：back 项在 front 项下可见。

你可以找到一个例子here。

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

谢谢。

迈克尔

Answer 1

那是因为卡片的所有正面和背面元素相对于 <body> 元素绝对 定位。 parent中的None个有position: relative，所以当然都会出现在页面的坐标（0,0）处。

您想要的是在 parent 元素上实际使用 position: relative，最好是在 per-card 级别上。给parent一个class，方便选择：

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

然后您为 parent 分配固定的宽度和高度（即 180px，因为您已经为卡片的 front/back 面定义了相同的宽度和高度），并将 position: relative 分配给它：

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

Proof-of-concept 修复：https://codesandbox.io/s/xjq08j5n1p

旁注：您仍然会意识到您的示例仍然有问题，因为翻转一张牌会翻转所有张牌。那是因为您将翻转状态存储在 parent 应用程序实例上，而不是在单个卡片级别上。我建议你为每张卡片创建一个 child 组件，这样你就可以单独存储它们的翻转状态。

Answer 2

非常准确。我只想添加完整的工作功能示例。

由于您已经声明了 .flipper class，我用它来添加 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 (Element UI) -> v-for 上的相对 div 中的绝对定位 div

VueJS (Element UI) -> absolute positioned div in relative div on v-for

css

vue.js

element-ui