1

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

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

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

你可以在这里找到一个例子。

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

谢谢你。

迈克尔

4

2 回答 2

3

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

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

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

然后你为父级分配一个固定的宽度和高度（即180px，因为你已经为卡的正面/背面定义了相同的），并分配position: relative给它：

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

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

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

于 2018-04-16T07:55:42.063 回答
0

特里的回答很到位。我只想添加工作功能的完整示例。

由于您已经.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

于 2018-04-17T06:09:26.033 回答