css实现 display: none和display: block的切换动画

版权声明：本文为博主原创文章，转载请带上我的小名嘿嘿嘿 https://blog.csdn.net/qq_37540004/article/details/78280454

话不多说先上代码

.index-detail-list .item-contain{
    display: none;
    overflow: hidden;
    padding: 14px 14px 9px;
    border: 1px solid #ececec;
} 
.index-detail-list .item-contain.active{
    display: block;
    <!---
        在这里也是可以加动画的 我是场景需求 加在了内层的ul
        animation: hideIndex 0.3s;
        -moz-animation: hideIndex  0.3s; /* Firefox */
        -webkit-animation: hideIndex  0.3s; /* Safari and Chrome */
        -o-animation: hideIndex  0.3s; /* Opera */
    -->
}
.index-detail-list .item-contain.active ul {
    animation: hideIndex 0.3s;
    -moz-animation: hideIndex  0.3s; /* Firefox */
    -webkit-animation: hideIndex  0.3s; /* Safari and Chrome */
    -o-animation: hideIndex  0.3s; /* Opera */
}
@keyframes hideIndex{
    <!--具体细节自己可以调整-->
    0%{ opacity: 0; transform: translate(800px, 0) }
    100%(opacity: 1; transform: translate(0, 0) )
}

DOM结构大致是这样

<div class=" index-detail-list " >
                <div class="echarts-box-title echarts-box padding-left-0">
                    <div class="item active" data-type="important">重要通知</div>
                    <div class="item " data-type="rules">规章制度</div>
                </div>
                <div class=" col-xs-12 item-contain active " data-type="important">
                    <ul >
                        <li >
                            <a href="" title="关于2017年中秋节国、庆节放假及作息时间调整的通知">
                                <span class="title text-c666">关于2017年中秋节国、庆节放假及作息时间调整的通知</span>
                                <span class="time text-c999">09-18</span>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class=" col-xs-12 item-contain  " data-type="rules">
                    <ul >
                        <li >
                            <a href="" title="规定规定规定规定规定规定规定规定">
                                <span class="title text-c666">规定规定规定规定规定规定规定规定</span>
                                <span class="time text-c999">09-18</span>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>

主要就是CSS3 animation动画 具体动画的效果你可以自己自定义啦