扩大 UL 的过渡效应

Question

如何在此扩展列表中添加过渡效果？

<div class="container">
    <div class="outerBG"> 
        <div class="innerBG">
            <h2 class="info">&#10148; Show text</h2>
            <ul id="infoContent" style="display:none">
                <li>TEST 1 TEST 1 TEST 1 TEST 1</li>
                <li>TEST 2 TEST 2 TEST 2 TEST 2</li>              
            </ul>
        </div>
    </div>
</div>

我正在使用 JavaScript 来切换 UL 的显示：

function expand () {
    infoContent.style.display = infoContent.style.display === 'none' ? '' : 'none';
}

是否可以由此制作过渡效果？

jsfiddle: https://jsfiddle.net/mqy2c80u/

Answer 1

您想添加到 max-height 的过渡并切换它而不是 display。原因是 display 不是序数值，因此无法设置动画，因为无法插入过渡值。 max-height 是序数，所以可以转换。

考虑到这一点，重要的是要注意 max-height 的 'show' 值应该足以容纳内容，否则过渡会延长。它也比 height 上的动画效果更好，因为不需要已知值，高度只会增长到所需的高度。

var infoContent = document.getElementById("infoContent");
var info = document.querySelector(".info");

function expand() { // do this on maxHeight not display
  infoContent.style.maxHeight = infoContent.style.maxHeight ? 0 : '100px';
}

info.addEventListener("click", expand, false);

.innerBG {
  width: 260px;
  margin: 0 auto 0 auto;
  overflow: auto;
}
.outerBG {
  width: 260px;
  background-color: #4f322a;
  margin: 15px auto 25px auto;
  border-radius: 15px;
  overflow: auto;
}
.container {
  width: 100%;
  background-color: #70463a;
  overflow: auto;
}
.innerBG h2 {
  font-size: 20px;
  font-family: lato;
  color: #ffffff;
  font-weight: 100;
}
#infoContent li {
  font-size: 20px;
  font-family: lato;
  color: #ffffff;
  font-weight: 100;
}
#infoContent {
  max-height: 0; /* collapse by default */
  overflow: hidden; /* <-- hide content when collapsed */
  transition: max-height 200ms; /* <-- animate on change */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="outerBG">
    <div class="innerBG">
      <h2 class="info">&#10148; Show text</h2>
      <ul id="infoContent">
        <li>TEST 1 TEST 1 TEST 1 TEST 1</li>
        <li>TEST 2 TEST 2 TEST 2 TEST 2</li>
      </ul>
    </div>
  </div>
</div>

Answer 2

您不能使用 display: none 将元素动画化到视图中。

但是，您可以更新 expand 函数，将 class 从 open 更改为 close，如下所示：

JavaScript 变化：

function expand () {
    infoContent.className = infoContent.className === 'open' ? 'close' : 'open';
}

然后使用 max-height 应用 CSS 动画（如果动画 div 中的内容是动态的）：

CSS加法：

#infoContent {
    margin: 0; // Remove the margins
    overflow: hidden;
}

#infoContent.close {
    max-height: 0; // Set max height to zero
    transition: max-height 0.3s ease;
}

#infoContent.open {
    max-height: 300px; /* Set max height as big as you think it will ever go */
    transition: max-height 0.3s ease;
}

演示： JSFiddle

Answer 3

这可以只使用 CSS 来解决，这里不需要 Javascript。

https://jsfiddle.net/mqy2c80u/10/

.container {
    height: 300px;
}

.innerBG {
    width: 260px;
    margin: 0 auto;
}
.outerBG {
    width: 260px;
    background-color: #4f322a;
    margin: 15px auto 25px auto;
    border-radius: 15px;
}
.container {
    width: 100%;
    background-color: #70463a;
}
.info {
    color: white;
    cursor: pointer;
}
.info h2 {
    display: inline-block;
}
.info h2:after {
    content:"Show content";
}
#demo {
    display: none;
}
#demo:checked ~ #infoContent {
    max-height: 400px;
}
#demo:checked + .info h2:after {
    content:"Hide content";
}
.innerBG h2 {
    font-size: 20px;
    font-family: lato;
    color: #ffffff;
    font-weight: 100;
}
#infoContent {
    transition-duration: 0.4s;
    max-height: 0;
    overflow: hidden;
}
#infoContent li {
    font-size: 20px;
    font-family: lato;
    color: #ffffff;
    font-weight: 100;
}

<div class="container">
    <div class="outerBG">
        <div class="innerBG">
            <input type="checkbox" id="demo" />
            <label class="info" for="demo">&#10148;
                <h2></h2>
            </label>
            <ul id="infoContent">
                <li>TEST 1 TEST 1 TEST 1 TEST 1</li>
                <li>TEST 2 TEST 2 TEST 2 TEST 2</li>
            </ul>
        </div>
    </div>
</div>

扩大 UL 的过渡效应

Transition effect on expanding UL

javascript

html

css

transition