如何使 CSS 块没有弯曲滑动 animation

Question

<header>
  <div className='button'>BARS</div>
  <a href='/'>Brand</a>
  <ul>
    <li><a href='/aboutme'>About Me</a></li>
    <li><a href='/contactme'>Contact Me</a></li>
  </ul>
</header>

header {
  background-color: red;
}

.button {
  position: absolute;
  left: 8px;
  right: 8px;
}

ul {
  display: flex;
  flex-direction: column;
}

我编写了类似于我的代码的代码。 单击按钮时，ul 状态将被切换，然后将折叠或打开。 折叠或打开时，必须显示 animation 向上或向下滑动。

我想通过仅使用 css 来实现该功能。 我用谷歌搜索它，我看到了很多代码，但这对我没有帮助。

第一的

ul {
  transition: height 0.2s;
}

ul .open {
  height: 100px;
}

ul .close {
  height: 0px;
}

我不能。 因为我不确切知道导航的高度。 我将高度设置为“自动”并尝试过。 但它没有用。

第二

ul {
  transition: transform 0.2s;
  transform-origin: top left;
}

ul .open {
  transform: scaleY(1);
}

ul .close {
  transform: scaleY(0);
}

它几乎奏效了。 但是当它关闭时，背景颜色红色仍然存在。 我尝试了其他几种方法，但都没有奏效。 我想如果我使用 js 作为动画，我可以，但我只想通过 css 来制作它。

有什么好的方法可以实现吗？