2
アニメーションアコーディオンは、一連のクリック可能な見出しから成り立っています。クリックすると、各見出しの下にあるコンテンツパネルが表示されたり折りたたまれたりします。アニメーションは、コンテンツパネルの高さプロパティと不透明プロパティの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クラスを切り替える：
は私codepenデモへのリンクです
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);
ソリューションに応じて、それをアニメーション化するために、高さアニメーションの代わりに使用
max-height：http://stackoverflow.com/questions/3508605/how-can-i-transition -height-0-to-height-auto-using-cssデモを見る：https://jsfiddle.net/0dn1sgo8/1/ – sinisakeこれは素晴らしい動作です！しかし、もし私が噛み付いていれば、トランジションは両方向で同じスピードを持たない。なぜなら、崩壊すると実際の高さで計算されるからだ。しかし、拡大すると、それは非常に高く設定された最大高さ値わざと。これを機能させるにはこれが唯一の方法ですか？ – artocignus
js：https://davidwalsh.name/css-slide（作者はあなたが言ったことを正確に指摘しています）ではなく、jsでスタイルを注入するのではなく、私はjavascript/jquery代わりにCSSの遷移を使用します、その場合は... – sinisake