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

话不多说先上代码

.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动画 具体动画的效果你可以自己自定义啦