版权声明:本文为博主原创文章,转载请带上我的小名嘿嘿嘿 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动画 具体动画的效果你可以自己自定义啦