transition二态动画切换

transition二态动画切换怎么搞

HTML

<ul>
  <li>
    <h1>lalallalala</h1>

    <div class="cont">
      <p>cont contcont</p>
      <p>cont contcont</p>
      <p>cont contcont</p>
      <p>cont contcont</p>
    </div>
  </li>
  <li class="active">
    <h1>haaaaaaaaaahahahahh</h1>

    <div class="cont">
      <p>cont contcont</p>
      <p>cont contcont</p>
      <p>cont contcont</p>
      <p>cont contcont</p>
    </div>
  </li>
  <li>
    <h1>ddddddddddddddddddddddddd</h1>

    <div class="cont">
      <p>cont contcont</p>
      <p>cont contcont</p>
      <p>cont contcont</p>
      <p>cont contcont</p>
    </div>
  </li>
</ul>

CSS

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

li {
  max-height: 30px;
  background: #eee;
  color: #333;
  border-bottom: 1px solid orange;
  transition: max-height 0.5s ease 0s;
}

li h1 {
  line-height: 30px;
  font-size: 14px;
  font-weight: bold;
}

li p {
  line-height: 20px;
}

li .cont {
  display: none;
}

li.active {
  max-height: 120px;
  overflow: hidden;
}

li.active .cont {
  display: block;
}

JavaScript

var lists = document.querySelectorAll('li');
[].slice.apply(lists).forEach(function(ele, index) {
  ele.addEventListener('click', function(e) {
    document.querySelector('li.active').classList.remove('active');
    ele.classList.add('active');
  }, false);
});