如何在VueJS中在一行中的元素中滑动并动画化具有相对宽度的同级

Question

我想在一行中的一个元素中滑动，并使其他元素的宽度相应地缩小，但仍然保持它们的相对宽度：

<div style="width: 100%; display: flex">
<div id="firstColumn" style="flex-grow: 1"></div>
<div id="secondColumn" style="flex-grow: 2"></div>
<div id="thirdColumn" style="flex-grow: 1" v-if="showColumn"></div>
</div>

我已经在第三列上尝试了vue转换(请参阅CodePen(，但动画没有按预期工作，另外两列只是捕捉到位。我猜有一种简单/优雅的方法可以做到这一点？

Answer 1

注意，在代码笔中，您使用了.slide-enter，在vue3中应该是.slide-enter-from

flex中的元素是如何获得尺寸的

您在第三个元素上使用transform: translate(100%,0)规则来在屏幕上移动它
当flexbox为每个子项计算它们的大小时，它不会考虑任何transforms。它将进行计算，就好像元素已经就位一样
因此，当您单击按钮时，"啪"的一声。

子级的大小是通过查看flex grow、flex shrink、width、min width和max width css属性来计算的。

将列的大小作为动画的一部分

可以使新列的大小成为动画的一部分
通过将flex-grow属性设置为从0到实际大小的动画
这将导致在新列设置动画时，兄弟列也会重新调整大小。

.slide-enter-active,
.slide-leave-active {
transition: all 1s;
}
slide-enter-from,
.slide-leave-to {
transform: translate(100%, 0);
flex-grow:0 !important;
}

示例

代码笔示例

我认为你可以从动画中删除translate；但我不知道你希望你的动画是什么样子。