引导模式：高度变化的过渡

Question

我有一个 Bootstrap (4) 居中的 Modal，其宽度和动态高度基于模态框内的内容（默认行为）。

在模态框内，我有几个将根据某些条件隐藏或显示的 div。模态框内的文本也会发生变化，并且可能比预期的要长。我不知道这些组件中哪些是可见的，哪些是隐藏的，所以高度无法固定。

现在，当一个组件被设置为隐藏时，模态会立即改变它的高度。我想使用 CSS 过渡来平滑地改变模态框的高度。

我已尝试应用此 CSS，但没有成功：

.modal {
    transition: height 1s !important;
}

由于我对 CSS 动画师的了解有限，我肯定遗漏了一些东西。如何应用平滑过渡？

Answer 1

如果你用 display: none 控制模态框内的元素，你不能平滑过渡，最好用 height:0 和隐藏它们 要过渡平滑模态高度，请输入以下代码：

.modal , .modal * {transition: all 0.2s ease}