【发布时间】：2016-11-20 17:12:26
【问题描述】：
我正在尝试编写一个由一系列可单击标题组成的动画手风琴，单击这些标题时，将在显示或折叠每个标题下方的内容面板之间切换。动画只是由内容面板的高度和不透明度属性上的 CSS 过渡组成。如果我为展开的内容面板指定一个以像素为单位的固定高度，一切都会按预期工作，但在我的情况下，我希望每个展开的内容面板都具有灵活的高度以适应可变内容。
以下是迄今为止我尽最大努力的代码。我用于显示内容面板的 CSS 类是 display_on，我使用 calc() 来返回 height 属性的像素值。动画在不透明度方面按预期工作，但我对它在 height 属性上的行为感到困惑。它似乎对显示阶段没有影响，并且在崩溃阶段它只会导致等于过渡时间（1 秒）的延迟，然后是内容面板的急剧崩溃，而不是我正在寻找的渐进运动为了。有什么办法可以按照我想要的方式进行这项工作吗？
这是我的 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);
【问题讨论】：
-
这很好用！如果我可能会挑剔，过渡在两个方向上的速度并不相同，因为在折叠时，它是在实际高度上计算的，但是在展开时，它是在最大高度值上计算的，该值设置得非常高故意。这是让它发挥作用的唯一方法吗？
-
不确定，有些事情可以用 js 完成：davidwalsh.name/css-slide（作者也准确地指出了你所说的），但是，而不是用 js '注入样式' - 我将使用 javascript/jquery 代替 css 转换，在这种情况下...
标签： javascript html css