JavaScript手风琴与css过渡

Question

我正在努力制作一部没有Jquery的手风琴，而且我已经让它工作了90％;）我现在面临的问题是，当你关闭手风琴时，css过渡不起作用。当您关闭手风琴时打开手风琴时，如何才能获得相同的过渡效果？

段：

var expandBtn = document.getElementsByClassName("expand-btn");

var expandClick = function() {
  this.nextElementSibling.classList.toggle("info-list-hide");
  this.parentElement.classList.toggle("expand-info");
}

for (var i = 0; i < expandBtn.length; i++) {
  expandBtn[i].addEventListener("click", expandClick, false);
}

.footer-info-expand { 
  max-height: 46px;
  overflow: hidden;
  border-bottom: 1px solid $oslo-gray;
}

.footer-info-expand.expand-info { 
  max-height: 800px;
  transition: max-height 1s ease-in-out;
}

.expand-btn { 
  display: flex;
  width: 100%;
  height: 45px);
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
}

.info-expand-icon {
  width: 13px;
  height: 8px;
  fill: $river-bed;
}

.info-list-hide { display: none; }

.footer-info-list { 
  margin-top: 10px;
  padding-bottom: 30px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

<div class="footer-info-expand">
  <a href="javascript:;" class="expand-btn">
    <h3>Nyheder</h3>
    <svg class="info-expand-icon">
      <use xlink:href="img/generel/svg-system.svg#expand-icon"></use>
    </svg>
  </a>
  <ul class="footer-info-list info-list-hide">
    <li>
      <a href="#">Nyhed 1</a>
    </li>
    <li>
      <a href="#">Nyhed 2</a>
    </li>
    <li>
      <a href="#">Nyhed 3</a>
    </li>
    <li>
      <a href="#">Nyhed 4</a>
    </li>
  </ul>
</div>

Answer 1

将transition属性添加到默认状态：

.footer-info-expand { 
    max-height: rem(46);
    overflow: hidden;
    border-bottom: rem(1) solid $oslo-gray;
    transition: max-height 1s ease-in-out;
}

.footer-info-expand.expand-info { 
    max-height: rem(800);
    transition: max-height 1s ease-in-out;
}

修改

在这里，您可以使用已编辑的代码解决方案：

＆＃13;

＆＃13;

var expandBtn = document.getElementsByClassName("expand-btn");

var expandClick = function() {
  this.nextElementSibling.classList.toggle("info-list-hide");
  this.parentElement.classList.toggle("expand-info");
}

for (var i = 0; i < expandBtn.length; i++) {
  expandBtn[i].addEventListener("click", expandClick, false);
}

＆＃13;

.footer-info-expand { 
  max-height: 46px;
  overflow: hidden;
  border-bottom: 1px solid $oslo-gray;
  transition: max-height 1s ease-in-out;
}

.footer-info-expand.expand-info { 
  max-height: 150px;
  transition: max-height 1s ease-in-out;
}

.expand-btn { 
  display: flex;
  width: 100%;
  height: 45px;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
}

.info-expand-icon {
  width: 13px;
  height: 8px;
  fill: $river-bed;
}


.footer-info-list { 
  margin-top: 10px;
  padding-bottom: 30px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  transition: max-height 1s ease-in-out;
}

＆＃13;

<div class="footer-info-expand">
  <a href="javascript:;" class="expand-btn">
    <h3>Nyheder</h3>
    <svg class="info-expand-icon">
      <use xlink:href="img/generel/svg-system.svg#expand-icon"></use>
    </svg>
  </a>
  <ul class="footer-info-list info-list-hide">
    <li>
      <a href="#">Nyhed 1</a>
    </li>
    <li>
      <a href="#">Nyhed 2</a>
    </li>
    <li>
      <a href="#">Nyhed 3</a>
    </li>
    <li>
      <a href="#">Nyhed 4</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我自己的洗脱

＆＃13;

＆＃13;

var expandBtn = document.getElementsByClassName("expand-btn");

var expandClick = function() {
  this.nextElementSibling.classList.toggle("info-list-hide");
  this.parentElement.classList.toggle("expand-info");
}

for (var i = 0; i < expandBtn.length; i++) {
  expandBtn[i].addEventListener("click", expandClick, false);
}

＆＃13;

    .footer-info-expand { 
      max-height: 46px;
      overflow: hidden;
      border-bottom: 1px solid $oslo-gray;
      transition: max-height 0.5s ease-in-out;
    }

    .footer-info-expand.expand-info { 
      max-height: 150px;
      /*transition: max-height 1s ease-in-out;*/
    }

    .expand-btn { 
      display: flex;
      width: 100%;
      height: 45px;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      text-transform: uppercase;
      cursor: pointer;
    }

    .info-expand-icon {
      width: 13px;
      height: 8px;
      fill: $river-bed;
    }


    .footer-info-list { 
      margin-top: 10px;
      padding-bottom: 30px;
      text-align: left;
      font-size: 14px;
      line-height: 1.5;
      /*transition: max-height 1s ease-in-out;*/
    }

＆＃13;

<div class="footer-info-expand">
    <a href="javascript:;" class="expand-btn">
        <h3>Nyheder</h3>
        <svg class="info-expand-icon">
            <use xlink:href="img/generel/svg-system.svg#expand-icon"></use>
        </svg>
    </a>
    <ul class="footer-info-list info-list-hide">
        <li>
            <a href="#">Nyhed 1</a>
        </li>
        <li>
            <a href="#">Nyhed 2</a>
        </li>
        <li>
            <a href="#">Nyhed 3</a>
        </li>
        <li>
            <a href="#">Nyhed 4</a>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;