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

您无法使用display: none将元素设置为视图。

但是，您可以将expand功能更新为将班级从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 2

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您想要向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>

过渡效应对扩大UL

3 个答案: