Question

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

正如您所看到的，当组件发生变化时，我有一个很好的小1s淡入淡出过渡。但是我的两个组件都没有相同的大小。一个是一行，另一个是多行。因此对话框的高度不一样。你可以在我的codepen上看到窗口的高度是＆＃34;跳跃＆＃34;从一个视图转换到另一个视图时从小到大。我正在努力实现平稳过渡。

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

.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修复，但我无法找到。

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

Answer 1

我不确定您在此处使用flex-grow想要实现的目标。 flex-grow用于操纵元素增长多少以占用其父容器的可用空间。

你应该动画的是height。但是，由于我们在不使用JavaScript的情况下不知道新内容的高度，因此一个很好的解决方法是使用max-height属性并在输入时将其设置为大值，然后返回离开时为零。这样可以创建所需的平滑调整大小效果。我已经修改了你的笔。

请在此处查看：https://codepen.io/aamirkhan-91/pen/KoQXOM

Answer 2

为获得更平滑的过渡，您可以尝试在父容器元素上应用height过渡。在此解决方案中，您可以在height钩子中获取内容beforeEnter，并将其应用到设置了CSS过渡settigs的父包装中。在此包装器中，还有一个用于动画不透明度的内容淡入效果的过渡。

not currently supported within APIM policy expressions

我发现此解决方案的唯一问题是height的初始值是未知的，这导致在第一次更改内容时不会发生过渡。

使用vuejs

2 个答案: