CSSアコーディオンのトランジションが動作しない

Question

トランジション効果を除いて正常に動作しているように思われるアコーディオンをセットアップしました。エフェクトをトリガーすると思われる2つの変更点は、JavaScriptによるクラス変更時の最大幅と不透明度です。

私がChromeの開発ツールを使用しているときに、手動で「最大幅」を変更すると、その効果は想定どおりに行われるため、少し混乱します。事前に

Here's the fiddle

HTML

<div id="hammockChoiceContainer"> 
    <button class="accordion active">Single</button> 
    <div class="panel show"> 
    <div class="accordian-section"> 
     <div class="inner-top-container clearfix"> 
     <div class="image-container"> 

     </div> 
     <div class="description-container"> 
      <div class="select-button btn">Select</div> 

     </div> 
     </div> 

     <div class="inner-middle-container clearfix"> 
     <p class="description">Small, light weight, with an comfortable elasticity made of high grade parachute silk.</p> 
     <p class="includes">Includes: S-hooks</p> 
     </div> 

     <div class="inner-bottom-container"> 
     <table class="facts"> 
      <tr> 
      <td>Size</td> 
      <td>320 x 155 cm/10' 6" x 4' 11"</td> 
      </tr> 
      <tr> 
      <td>Weight</td> 
      <td>500 g/17.6 oz</td> 
      </tr> 
      <tr> 
      <td>Carrying capacity</td> 
      <td>350 Kg/772 lbs</td> 
      </tr> 
      <tr> 
      <td>Material</td> 
      <td>High Grade Parachute Nylon</td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </div> 
    <button class="accordion">Double</button> 
    <div class="panel"> 
    <div class="accordian-section">test</div> 
    </div> 
    <button class="accordion">King</button> 
    <div class="panel"> 
    <div class="accordian-section">test</div> 
    </div> 
    <button class="accordion">Perfect</button> 
    <div class="panel"> 
    <div class="accordian-section">test</div> 
    </div> 
    <button class="accordion">Mammock</button> 
    <div class="panel"> 
    <div class="accordian-section">test</div> 
    </div> 
    <button class="accordion">Kids</button> 
    <div class="panel"> 
    <div class="accordian-section">test</div> 
    </div> 
</div> 

CSS

/* accordian */ 
button.accordion { 
    font-family: 'Kulturista Bold Italic', Sans-Serif; 
    background-color: #f1f1f1; 
    color: $TTMdarkBlue; 
    cursor: pointer; 
    padding: 18px; 
    width: 100%; 
    text-align: left; 
    border: none; 
    border-radius: 0; 
    outline: none; 
    transition: 0.4s; 
} 
button:first-of-type {border-radius: 8px 8px 0 0;} 
button:last-of-type {border-radius: 0 0 10px 10px;} 
button.accordion.active, button.accordion:hover { 
    background-color: $TTMdarkBlue; 
    color: white; 
} 
.panel { 
    padding: 0 18px; 
    background-color: white; 
    display: none; 
} 
.panel.show { 
    display: block; 
} 
.panel { 
    padding: 18px 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: all 0.6s ease-in-out; 
    opacity: 0; 
} 
.panel.show { 
    opacity: 1; 
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */ 
} 
.panel:last-of-type { 
    border-radius: 0 0 10px 10px; 
} 
.accordian-section { 
    // height: 283px; 
} 
button.accordion:after { 
    content: '+'; /* Unicode character for "plus" sign (+) */ 
    color: $TTMdarkBlue; 
    float: right; 
    margin-left: 5px; 
} 
button.accordion:hover:after { 
    color: white; 
} 
button.accordion.active:after { 
    content: "-"; /* Unicode character for "minus" sign (-) */ 
    color: white !important; 
} 
.image-container, .description-container { 
    float: left; 
    width: 50%; 
    box-sizing: border-box; 
} 
.description-container { 
    padding-left: 5px; 
} 
.includes {margin-bottom: 0;} 
.select-button {float:right;} 
.btn { 
    color: white; 
    font-family: 'Kulturista Bold Italic', Sans-Serif; 
    background-color: $TTMmediumOrange; 
    padding: 9px; 
    margin-bottom: 10px; 
    width: 130px; 
    font-size: 20px; 
    text-align: center; 
    text-transform: uppercase; 
    border-radius: 3px; 
    transition: all 0.1s; 
    cursor: pointer; 
} 
.btn:hover { 
    background-color: $TTMlightOrange; 
} 
table { 
    border-collapse: collapse; 
    width: 100%; 
} 
tr { 
    font-size: 12px !important; 
} 
td, th { 
    border: 1px solid #dfdfdf; 
    text-align: left; 
    padding: 2px 4px; 
} 
tr:nth-child(even) { 
    background-color: #dfdfdf; 
} 

/* end accordian */ 

はJavaScript

// accordian toggle 
var acc = document.getElementsByClassName("accordion"); 
var panel = document.getElementsByClassName('panel'); 

for (var i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
     var setClasses = !this.classList.contains('active'); 
     setClass(acc, 'active', 'remove'); 
     setClass(panel, 'show', 'remove'); 

     if (setClasses) { 
      this.classList.toggle("active"); 
      this.nextElementSibling.classList.toggle("show"); 
     } 
    } 
} 

function setClass(els, className, fnName) { 
    for (var i = 0; i < els.length; i++) { 
     els[i].classList[fnName](className); 
    } 
} 

ありがとう！

Answer 1

あなたはほぼあります。

"max-height"を使用したこのアニメーショントリックを実行するには、.panelクラスにmax-height: 0;を追加するだけです。

このようにして、アニメーションはmax-height: 0から開始され、設定した最大高さまでアニメートされます：max-height: 500px;またはコンテンツの高さ以上のすべての画面サイズで）。 max-heightを0に設定しないと、デフォルト値はnoneであり、ブラウザはnoneから500pxにアニメートできません。これはちょうどそれが動作する方法です。ここで

はあなたのための作業フィドルです：https://jsfiddle.net/superKalo/0pv6smvd/