話不多說先上程式碼

.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動畫 具體動畫的效果你可以自己自定義啦