css3 transition 动画状态切换

问题描述：

动画状态切换分为常态和被选中的·active·状态。我想用·transition·做高度的渐变动画。
当选中时，被选中的li有动画，但是，被移除了active的li怎样也有动画呢？

* {
    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;
}

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

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