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

来源：互联网发布：淘宝卖家升级好难编辑：程序博客网时间：2024/05/29 13:56

这里写图片描述
话不多说先上代码

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

阅读全文

0 0