Question

我有一个手风琴设置似乎工作正常，除了过渡效果。通过JavaScript更改类时，假设触发效果的两个更改是max-width和opacity。

当我使用Chrome的开发工具时，如果我手动更改＆＃34; max-width＆＃34;效果将按照它的假设发生，所以我有点困惑。

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

你几乎就在那里。

为了使用＆＃34; max-height＆＃34;这个动画技巧要工作，您只需将max-height: 0;添加到.panel类。

这就是为什么：这样，它从max-height: 0开始动画，它动画到你设置的最大高度 - 在你的情况下：max-height: 500px;或任何你喜欢的，如只要它超过内容的高度（在所有屏幕尺寸上）。如果不将max-height设置为0，则默认值为none，浏览器无法从none设置为500px。这就是它的工作方式。

这是一个适合你的小提琴：https://jsfiddle.net/superKalo/0pv6smvd/

CSS手风琴转换不起作用

1 个答案: