javascript - 动画 Accordion : how to make it work with variable height

Question

我正在尝试编写一个由一系列可点击标题组成的动画 Accordion 代码，单击这些标题时，将在显示或折叠每个标题下方的内容面板之间切换。动画仅包含内容面板的高度和不透明度属性的 CSS 过渡。如果我为展开的内容面板指定一个固定的像素高度，一切都会按预期工作，但在我的例子中，我希望每个展开的内容面板都具有灵活的高度以适应可变内容。

以下是我迄今为止最大努力的代码。我用于显示内容面板的 CSS 类是 display_on，我使用 calc() 返回高度属性的像素值。动画在不透明度方面按预期工作，但我对它在 height 属性上的行为感到困惑。它似乎对显示阶段没有影响，在折叠阶段它只会导致等于过渡时间(1 秒)的延迟，然后是内容面板的急剧折叠，而不是我正在寻找的渐进运动为了。有什么办法可以让这项工作按照我想要的方式进行吗？

这是我的代码笔演示的链接: 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>