代码之家 › 专栏 › 技术社区 › Tyvain

显示时的CSS转换:块不工作[重复]

css-animations css html javascript

Tyvain · 技术社区 · 6 年前

我正在尝试将display:none转换为display:block。

但这种转变不起作用。。。

var acc = document.getElementsByClassName("accordion");
var i;
var allpanel = document.getElementsByClassName("panel");

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    for (j = 0; j < allpanel.length; j++) {
      allpanel[j].classList.remove("hasactive");
    }
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      // panel.style.display = "none";
      panel.classList.remove("hasactive");
    } else {
      // panel.style.display = "block";
      panel.classList.toggle("active");
    }
  });
}

.accordion {
  background-color: #00827D;
  color: White;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.accordion:hover {
  background-color: #00827D;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.panel.active {
  display: block;
  transition: all 3s ease;
}

<h2>Accordion</h2>

<div class="accordion">Section 1</div>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>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.</p>
</div>

1 回复 | 直到 6 年前

StardustGogeta 6 年前

耍花招 How can I transition height: 0; to height: auto; using CSS? :

var acc = document.getElementsByClassName("accordion");

for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    panel.classList.toggle("active");
  });
}

.accordion {
  background-color: #00827D;
  color: White;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.accordion:hover {
  background-color: #00827D;
}

.panel {
  padding: 0 18px;
  max-height: 0;
  background-color: white;
  overflow: hidden;
  transition: all 3s ease;
}

.panel.active {
  max-height: 100vh;
}

<h2>Accordion</h2>

<div class="accordion">Section 1</div>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>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.</p>
</div>

诀窍是改变 max-height 而不是 display 因为这允许平稳过渡。从占用空间到顺利改变是不可能的( display: block )消失( display: none )反之亦然。