Question

我试图编写一个由一系列可点击标题组成的动画手风琴，点击这些标题时，会在每个标题下方显示或折叠内容面板之间切换。动画只包含内容面板高度和不透明度属性的CSS过渡。如果我为扩展内容面板指定固定高度（以像素为单位），它都会按预期工作，但在我的情况下，我希望每个展开的内容面板都具有灵活的高度，以适应可变内容。

以下是我迄今为止最努力的代码。我用于显示内容面板的CSS类是display_on，我使用calc()返回height属性的像素值。动画按预期的不透明度工作，但我在高度属性上难以理解它的行为。它似乎对揭示阶段没有影响，并且在崩溃阶段它只会导致延迟等于过渡时间（1秒），随后是内容面板的急剧崩溃，而不是逐渐的移动I＆＃39;我正在寻找。有没有办法以我想要的方式使这项工作？

这是我的codepen演示的链接： http://codepen.io/artocignus/pen/QGdPWx

我的HTML标记：

<h1 class="accordion_heading">
  Accordion Heading 1
</h1>
<div class="accordion_panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<h1 class="accordion_heading">
  Accordion Heading 2
</h1>
<div class="accordion_panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<h1 class="accordion_heading">
  Accordion Heading 3
</h1>
<div class="accordion_panel">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

我的CSS：

.accordion_heading{
  margin: 5px;
  font-size: 30px;
  color: #blue;
  background-color: grey;
  padding: 0 1em;
  width: 400px;
  border-radius: 5px;
}

.accordion_heading:hover{
  cursor: pointer;
  color: crimson;
  transition: color 0.3s ease;
}

.accordion_panel{
  margin: 5px;
  width: 400px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 1s ease;
}

.display_on{
  height: calc(100%);
  opacity: 1;
  transition: all 1s ease;
}

我的JavaScript切换display_on CSS类：

function accordionToggle(e){
  var target = e.target;
  if(target.classList.contains('accordion_heading')){
    var to_toggle = target.nextElementSibling;
        to_toggle.classList.toggle('display_on');
  }
}

document.addEventListener('click', accordionToggle);

Answer 1

使用max-height代替高度动画，根据你的身高

为其设置动画

function accordionToggle(e){
  var target = e.target;
  if(target.classList.contains('accordion_heading')){
    var to_toggle = target.nextElementSibling;
        to_toggle.classList.toggle('display_on');
  }
}

document.addEventListener('click', accordionToggle);

.accordion_heading{
  margin: 5px;
  font-size: 30px;
  color: #blue;
  background-color: grey;
  padding: 0 1em;
  width: 400px;
  border-radius: 5px;
}

.accordion_heading:hover{
  cursor: pointer;
  color: crimson;
  transition: color 0.3s ease;
}

.accordion_panel{
  margin: 5px;
  width: 400px;
  opacity: 0;
    max-height: 0;
    transition: all 1s ease-out;
    overflow: hidden;
}

.display_on{
  opacity: 1;
    max-height: 500px;
    transition: all 1s ease-in;
}

<h1 class="accordion_heading">
  Accordion Heading 1
</h1>
<div class="accordion_panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<h1 class="accordion_heading">
  Accordion Heading 2
</h1>
<div class="accordion_panel">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<h1 class="accordion_heading">
  Accordion Heading 3
</h1>
<div class="accordion_panel">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

动画手风琴：如何让它在高度可变的情况下工作

1 个答案: