javascript - 如何在 Vanilla JS 中从位置过渡到动画？

Question

我有一个菜单栏，单击它会切换菜单项的显示。在菜单栏之后有一组段落。我想让隐藏和显示菜单项平滑，段落容器通过过渡改变位置。目前我只能为菜单项切换添加过渡效果，但改变位置的段落仍然没有动画。如何制作动画？

请在 https://jsfiddle.net/kadaj/f8sua52p/ 找到样本

<div id="menubar">
  <div class="menu-item" data-id="home">Home</div>
  <div class="menu-item tags" data-id="tag">Tags</div>
  <div class="menu-item" data-id="archive">Archive</div>
  <div class="menu-item" data-id="example">Example</div>
  <div class="menu-item" data-id="download">Download</div>
  <div class="menu-item" data-id="about">About</div>
</div>
<div id='tags-wrapper' class='menu-item-wrapper hide-menu-item'>
  <ul>
    <li>Apple</li>
    <li>Bannana</li>
    <li>Cherry</li>
    <li>Blueberry</li>
    <li>Blackberry</li>
  </ul>
</div>
<div class="main-wrapper">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>

document.querySelector("#menubar").addEventListener("click", function(e) {
  switch (e.target.dataset.id) {
    case "tag":
      let elem = document.querySelector("#tags-wrapper");
      if (elem.classList.contains("show-menu-item")) {  // hide
        elem.classList.add("hide-menu-item");
        elem.classList.remove("show-menu-item");
      } else {  // show
        elem.classList.add("show-menu-item");
        elem.classList.remove("hide-menu-item");
      }
      break;
  }
}, false);

#menubar {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  text-align: center;
  font-family: sans-serif;
  font-size: 20px;
  margin: 1.5em 0 0 1em;
}
.menu-item {
  text-align: center;
  margin-right: 1em;
}
.menu-item-wrapper {
  transition: opacity 0.5s cubic-bezier(0.17, 1.1, 1, 1);
}
.display-none {
  display: none;
}
.display-block {
  display: block
}
.show-menu-item {
  opacity: 1;
  position: relative;
  visibility: visible;
  z-index: 0;
}
.hide-menu-item {
  opacity: 0;
  position: absolute;
  visibility: hidden;
  z-index: 0;
  animation: smooth 1s 0.3s ease-out forwards;  /* I tried different ways, but these are not working */
}
@keyframes smooth {   /* not working */
  to {
    background: coral;
    position: absolute;
  }
}
ul {
  border: 1px solid red;
}
p {
  border: 1px solid orange;
  background: #eee;
  padding: 0.5em;
}

Answer 1

您可以使用 max-height 技巧。另外，您不需要那个动画。
编辑这些类的属性:

.hide-menu-item {
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    max-height: 0;
    transition: 0.36s;
}
.show-menu-item {
    opacity: 1;
    visibility: visible;
    z-index: 0;
    max-height: 300px;
}
.menu-item-wrapper {
    transition: 2s cubic-bezier(0.17, 1.1, 1, 1);
    position: relative;
}