html - Accordion 下拉菜单动画不正确

Question

我在使用 codepen 上的 Accordion Dropdown 片段时遇到了一些问题.

function togglePara(n, m) {
  var para = document.getElementById(m + '-para' + n);
  para.classList.toggle('active');
}

function showModule(m) {
  debugger;
  var item = document.getElementById(m);
  var other = document.getElementsByClassName('dropdown');

  for (var i = 0; i < other.length; i++) {
    other[i].style.display = "none";
  }
  item.style.display = "block";
}

* {
  padding: 0;
  margin: 0;
  font-family: 'montserrat', sans-serif;
}

main {
  background-color: salmon;
  overflow: auto;
  padding-top: 100px;
  height: 100vh;
  width: 100vw;
}

#accordion {
  display: none;
}

.dropdown {
  width: auto;
  margin: auto;
  padding: 2em;
}

section {
  margin: auto;
  width: 70%;
  overflow: hidden;
}

a {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #4673AD;
  background-color: #eee;
  padding: 1em 0;
  position: relative;
  z-index: 1;
}

a:hover {
  color: #eee;
  background-color: #4673AD;
  transition: .5s;
}

@keyframes slide {
  0% {
    max-height: 0
  }
  100% {
    max-height: 300px
  }
}

p {
  display: none;
  height: -400px;
  padding: 0;
}

.active {
  display: block;
  background-color: #E5FB8B;
  color: #444;
  text-align: justify;
  padding: 1em;
  padding-top: 2em;
  position: relative;
  z-index: 0;
  height: -400px;
  animation: slide 1s 1s;
}

nav {
  display: none;
}

nav section p {
  test-align: center;
}

.buttons {
  display: flex;
  width: 70%;
  margin: 1em auto;
}

.button {
  padding: 1em;
  border: 2px solid #E5FB8B;
  background-color: #E5FB8B;
  color: #333;
  border-radius: 8px;
  width: 40%;
  margin: 1em;
}

a.button:hover {
  border: 2px solid #4673AD;
  color: #e5fb8b;
}

<main>
  <div id="accordion" class="dropdown">
    <section>
      <a href="javascript:void(0)" onclick="togglePara(1, 'accordion')">Read Me First</a>
      <p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
        tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
    </section>
    <section>
      <a href="javascript:void(0)" onclick="togglePara(2, 'accordion')">No, Read <i>Me</i> First</a>
      <p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
        tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
    </section>
    <section>
      <a href="javascript:void(0)" onclick="togglePara(3, 'accordion')">Just Read <i>Me</i>, Please</a>
      <p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
        tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
    </section>
  </div>
  <nav id="menu" class="dropdown">
    <section>
      <a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
    <section>
      <a href="javascript:void(0)" onclick="togglePara(1, 'menu'); togglePara(2, 'menu')">Portfolio</a>
      <p id="menu-para1">Item one</p>
      <p id="menu-para2">Item Two</p>
    </section>
    <section>
      <a href="javascript:void(0)" onclick="togglePara(3, 'menu'); togglePara(4, 'menu')">Meet The Team</a>
      <p id="menu-para3">John Doe</p>
      <p id="menu-para4">Sara Faun</p>
    </section>
  </nav>
  <div class="buttons">
    <a href="javascript:void(0)" class="button" onclick="showModule('accordion')">Show Accordion</a>
    <a href="javascript:void(0)" class="button" onclick="showModule('menu')">Show Menu</a>
  </div>
</main>

我想为下拉菜单的展开设置动画。我希望它从容器的顶部开始。现在，它从填充的末尾开始。不好看我将动画延迟了 1 秒，这样你就能明白我的意思了 这是我的笔的链接:https://codepen.io/b3u/pen/RBbeWy .提前致谢!

Answer 1

Transition 而不是动画，在这种情况下，因为它更简单。 没有接触动画代码，只是创建了过渡效果。

最大高度上的过渡不会使用 GPU 处理，因此请注意移动设备(或旧计算机)上可能出现的性能问题

 function togglePara(n, m) {
  var para = document.getElementById(m + '-para' + n);
  para.classList.toggle('active');
}

function showModule(m) {
  var item = document.getElementById(m);
  var other = document.getElementsByClassName('dropdown');
  
    for (var i = 0; i< other.length ; i++){
      other[i].style.display = "none";
    }
 item.style.display = "block";
}

*{
  padding: 0;
  margin: 0;
  font-family: 'montserrat', sans-serif;
}
main {
  background-color: salmon;
  overflow: auto;
  padding-top: 100px;
  height: 100vh;
  width: 100vw;
}
#accordion {
  display: none;
}
.dropdown {
  width: auto;
  margin: auto;
  padding: 2em;
}
section {
  margin: auto;
  width: 70%;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #4673AD;
  background-color: #eee;
  padding: 1em 0;
  position: relative;
  z-index: 1;
}
a:hover {
  color: #eee;
  background-color: #4673AD;
  transition: .5s;
}
@keyframes slide{
  0% {max-height: 0}
  100% {max-height: 300px}
}
p {
  display: block;
  max-height: 0;
  overflow:hidden;
  padding: 0; 
  transition:max-height 0.5s ease-out,padding  0.5s ease-out;
  -moz-transition:max-height 0.5s ease-out,padding  0.5s ease-out;
  -webkit-transition:max-height 0.5s ease-out,padding  0.5s ease-out;
  background-color: #E5FB8B;
  color: #444;
  text-align: justify;
  position: relative;
  z-index: 0;
  box-sizing:border-box;
}

p.active{
  padding: 2em 1em 1em 1em;
  max-height: 1000px;
  transition:max-height 2.5s ease-out,padding 0.5s ease-out;
  -moz-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
  -webkit-transition:max-height 2.5s ease-out,padding 0.5s ease-out;
}
nav{
  display: none;
}
nav section p {
  test-align: center;
}

.buttons {
  display: flex;
  width: 70%;
  margin: 1em auto;
}

.button {
  padding: 1em;
  border: 2px solid #E5FB8B;
  background-color: #E5FB8B;
  color: #333;
  border-radius: 8px;
  width: 40%;
  margin: 1em;
}
a.button:hover{
  border: 2px solid #4673AD;
  color: #e5fb8b;
}

<main>
  <div id="accordion" class="dropdown">
    <section>
      <a href="javascript:void(0)" onclick="togglePara(1, 'accordion')">Read Me First</a>
      <p id="accordion-para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
        tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
    </section>
    <section>
      <a href="javascript:void(0)" onclick="togglePara(2, 'accordion')">No, Read <i>Me</i> First</a>
      <p id="accordion-para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
        tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
    </section>
    <section>
      <a href="javascript:void(0)" onclick="togglePara(3, 'accordion')">Just Read <i>Me</i>, Please</a>
      <p id="accordion-para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus odio id nisl blandit, pharetra cursus nibh porta. Donec sodales, turpis vitae interdum tincidunt, ante diam scelerisque erat, sed accumsan elit tortor bibendum turpis. In et
        tempus est. Quisque dictum aliquet nunc, sed ullamcorper velit pharetra sit amet. Fusce posuere arcu dolor, eget scelerisque tellus bibendum in. Integer eget condimentum arcu. Duis vitae aliquet enim.</p>
    </section>
  </div>
  <nav id="menu" class="dropdown">
    <section>
      <a href="javascript:void(0)" onclick=togglePara(1)>Home</a></section>
    <section>
      <a href="javascript:void(0)" onclick="togglePara(1, 'menu'); togglePara(2, 'menu')">Portfolio</a>
      <p id="menu-para1">Item one</p>
      <p id="menu-para2">Item Two</p>
    </section>
    <section>
      <a href="javascript:void(0)" onclick="togglePara(3, 'menu'); togglePara(4, 'menu')">Meet The Team</a>
      <p id="menu-para3">John Doe</p>
      <p id="menu-para4">Sara Faun</p>
    </section>
  </nav>
  <div class="buttons">
    <a href="javascript:void(0)" class="button" onclick="showModule('accordion')">Show Accordion</a>
    <a href="javascript:void(0)" class="button" onclick="showModule('menu')">Show Menu</a>
  </div>
</main>