手风琴下拉菜单动画不正确

Question

上的 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 秒，这样你就能明白我的意思了这是我笔下的 link：https://codepen.io/b3u/pen/RBbeWy。提前致谢！

Answer 1

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

最大高度上的过渡不会使用 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>

Answer 2

在您的代码的更新版本之下，更改是在动画开始时为顶部和底部的填充添加重置。希望这有帮助。祝一切顺利！

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; padding-top: 0; padding-bottom: 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>

手风琴下拉菜单动画不正确

Accordion Dropdown not animating properly

html

css

accordion

css-animations

dropdown