时间戳

首页 > 解决方案 > 如何在香草JS中从位置过渡到动画？

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

问题描述

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

请在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;
}

标签： javascripthtmlcssanimationtransition

解决方案

你可以使用这个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;
}

推荐阅读