css3 transition 动画状态切换 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

css3 transition 动画状态切换

杨冬芳 2016-05-31 15:54:30 1416

问题描述:

动画状态切换分为常态和被选中的·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);
});
css切换 状态切换 css状态 transition状态
分享到
取消 提交回答
全部回答(1)
  • 西秦说云
    2019-07-17 19:22:07

    把transition用在active状态

    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

最新问题