未渲​​染项目时如何使弹性盒容器平滑调整大小？

Question

我想在 flex-box 容器中为自动高度创建一个过渡。 我有一个包含名称、积分、状态和警报的用户栏。

有时会呈现警报消息，有时不会。它使用display: none 我想要实现的是在我单击警报消息时平滑地调整 flex-box 容器的高度和过渡。

这是一个基本示例（不工作）

const $user_alert = document.querySelector('user-alert')

$user_alert.onclick = () => {
    $user_alert.classList.add('hide')
  setTimeout(() => $user_alert.classList.remove('hide'), 1e3)
}

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: aliceblue;
}

user-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 2s ease-in-out;
}

user-alert {
  cursor: pointer;
  color: red;
}

.hide {
  display: none;
}

<user-bar>
  <user-name>Albert Einstein</user-name>
  <user-points>10000</user-points>
  <user-status>on</user-status>
  <user-alert>Time to Party Hard</user-alert>
</user-bar>

如果不为用户栏中的每个元素定义高度，我无法弄清楚如何创建简单的过渡...也许使用 display: none 是不可能的。

任何帮助或想法将不胜感激！

Answer 1

1. 将dispaly: none 更改为transform: scale(0)
2. 除了display: flex 添加transform: scale(1) 让我们知道这是否有效！