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

时间：2018-07-10 13:54:13

标签： html css css-animations accordion dropdown

我在codepen的“手风琴下拉菜单”片段上遇到了一些麻烦。

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。预先感谢！

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

在代码的更新版本下，更改是在动画开始处的顶部和底部添加了用于填充的重置。希望对您有所帮助。 祝一切顺利！ 

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>

相关问题
最新问题