CSS 아코디언 전환이 작동하지 않습니다.

Question

전환 효과를 제외하고는 잘 작동하는 것처럼 보이는 아코디언을 설정했습니다. 효과를 트리거하는 두 가지 변경 사항은 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 */ 

자바 스크립트

// 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; 또는 무엇 이건 당신은만큼, 좋아하는 그 (내용의 높이보다 더 모든 화면 크기에서). 최대 높이를 0으로 설정하지 않으면 기본값은 none이고 브라우저는 none에서 500px으로 움직일 수 없습니다. 이것이 작동하는 방식입니다.

여기 당신을 위해 작업 바이올린입니다 : https://jsfiddle.net/superKalo/0pv6smvd/