在 vuejs 中使用动态组件平滑高度过渡答案

【问题标题】：Smooth height transition with dynamic components in vuejs在 vuejs 中使用动态组件平滑高度过渡
【发布时间】：2019-11-22 04:58:31
【问题描述】：

我在 vuejs 中创建了一个小脚本。这是一个对话框，可以在事件发生时动态更改视图。

https://codepen.io/anon/pen/zWpVvW

如您所见，当组件更改时，我有一个不错的 1s 淡入淡出过渡。但是我的两个组件的大小都不相同。一种是单线，另一种是多线。因此对话框的高度是不一样的。您可以在我的代码笔上看到，当从一个视图转换到另一个视图时，窗口的高度从小到大“跳跃”。我正在努力实现平稳过渡。

我的想法是使用 flexbox。对话框和卡片已配置为垂直弹性框。 card 和 card__text 已经配置了 2s 的过渡和 1 的 flex-grow。

.dialog {
  display: flex;
  flex-direction: column;
}

.card {
  flex: 1 1 1;
  display: flex;
  flex-direction: column;
  transition: all 2s ease;
}

.card__text {
  flex: 1 1 1;
  transition: all 2s ease;
}

不幸的是，对话框仍然无法顺利调整大小。我很确定这可以通过 CSS 解决，但我找不到方法。

有什么想法吗？非常感谢！

【问题讨论】：

标签： css flexbox css-transitions

【解决方案1】：

我不确定您在此处使用flex-grow 想要达到什么目的。 flex-grow 用于控制元素将增长多少以占用其父容器的可用空间。

您应该制作动画的是height。但是，由于我们不知道不使用 JavaScript 的情况下新内容的高度是多少，所以一个很好的解决方法是使用 max-height 属性并在进入时将其设置为较大的值，并在离开时返回为零。这将创建您想要的平滑调整大小效果。我用这个改动修改了你的笔。

在这里查看：https://codepen.io/aamirkhan-91/pen/KoQXOM

【讨论】：

【解决方案2】：

为了更平滑的过渡，您可以尝试在父容器元素上应用 height 过渡。在此解决方案中，您在 beforeEnter 钩子中获取内容 height 并将其应用到具有 css 转换设置的父包装器中。在这个包装器中，还有另一个内容渐变效果的过渡，带有动画的不透明度。

example

我发现此解决方案的唯一问题是 height 初始化值未知是什么导致第一次内容更改时没有过渡。

【讨论】：