Javascript 在使用vue.js有条件地显示父元素中的按钮之前和之后，保持父元素的大小相同

使用vue.js（和），我有一个卡片组件。触发事件时，将显示卡底部的按钮。当按钮出现时，由于添加的按钮的高度，卡的大小会增加。我觉得这很难看，希望卡片的大小在有按钮前后都一样

在添加按钮以补偿高度差之前，我尝试了一些

，但这很笨拙，并且在使用淡入设置按钮外观动画时无法正常工作，例如

由于卡片将包含各种内容（大小），因此为卡片制作固定大小的内容不会真正起作用

---

在显示按钮之前和之后，我如何能拥有相同大小的卡片？

你可以给出按钮

位置：绝对
和卡片
位置：相对
的css，然后摆弄
底部；左边顶部对,按钮的位置设置。
快速修复：您必须知道按钮的高度。然后将其嵌套到元素中，使其具有与
min height
属性相同的高度：

<div id="button-container" style="min-height: /* your button height */">
  <button>Hidden yet</button>
</div>

.bordered{
位置：绝对位置；
边框：2件纯黑；
}

益普索姆，布拉，布拉，布拉

我只是个麻烦制造者
您能否在问题中添加一个最小的示例来演示问题？您是否已经在dom中设置了按钮，但将其设置为visibility hidden？然后使用事件触发器添加一个类，将其更改为可见并使其处于活动状态。@mthomp是的，这可能就是我需要的。但是当隐藏时，它不应该对点击等做出反应？！将对此进行研究…@musicformellons您可以使用您正在使用的数据使按钮可见，启用按钮的功能。@musicformellons Thanx:）但我仍然认为这是一个丑陋的解决方案：）我似乎不是vue中唯一一个有此问题的[link]（）。而这一个：有一个很好的演示：@musicformellons是的，因为通常不能使用“可见性”代替“显示”属性。许多框架依赖于更改显示属性，而不仅仅是可见性。为什么不能使用可见性属性？