使用css3 的 animation 属性实现的点击滑出侧栏

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

        <meta name="author" content="TKB-nice" />

        <style>

        *{

                margin: 0;

                padding: 0;

        }

        body{

                height: 100%;

                position: relative;

                top: 0;

                left: 0;

        }

        html{

                height: 100%;

                background-color: #eee;

        }

        li{

                list-style: none;

        }

        .page{

                height: 100%;

                width: 100%;

                overflow: hidden;

        }

        .list li:last-child{

                margin-top: 5px;

                background-color: skyblue;

        }

        .text{

                height: 50%;

        }

        .close{

                height: 50%;

        }

        .side-bar{

                display: none;

                width: 100%;

                height: 100%;

                background-color: orange;

                position: absolute;

                top: 0;

                z-index: 99;

                }

                @keyframes mymove

                {

                from {left:100%;}

                to {left:50%;}

                }

                @-webkit-keyframes mymove

                {

                from {left:100%;}

                to {left:0;}

                }

                @keyframes myleave

                {

                from {left:50%;}

                to {left:100%;}

                }

                @-webkit-keyframes myleave

                {

                from {left:0;}

                to {left:100%;}

                }

    </style>

    </head>

<body>

        <div class="page">

                <div class="mian">

                        <ul class="list">

                                <li class="item1" id="item1">侧栏1</li>

                                <li class="item2" id="item2">侧栏2</li>

                        </ul>

                </div>

                <div class="side-bar" id="side-bar1">

                        <p class="text">我是侧栏111111111</p>

                        <p class="close" id="close1">点击关闭</p>

                </div>

                <div class="side-bar" id="side-bar2">

                        <p class="text">我是侧栏2222222</p>

                        <p class="close" id="close2">点击关闭</p>

                </div>

        </div>

    <script>

    document.getElementById('item1').onclick=function(){

        document.getElementById('side-bar1').style.animation = 'mymove 0.5s ease forwards';

        document.getElementById('side-bar1').style.display = 'block';

    }

    document.getElementById('item2').onclick=function(){

        document.getElementById('side-bar2').style.animation = 'mymove 0.5s ease forwards';

        document.getElementById('side-bar2').style.display = 'block';

    }

    document.getElementById('close1').onclick=function(){

        document.getElementById('side-bar1').style.animation = 'myleave 0.5s ease forwards ';

        setTimeout(function(){

                document.getElementById('side-bar1').style.display = 'none';

        },500);

    }

    document.getElementById('close2').onclick=function(){

        document.getElementById('side-bar2').style.animation = 'myleave 0.5s ease forwards ';

        setTimeout(function(){

                document.getElementById('side-bar2').style.display = 'none';

        },500);

    }

    </script>

</body>

</html>

CSS3侧栏滑出简单实现的更多相关文章

  1. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  2. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  3. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  4. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  5. 玩转Firefox侧栏

    偶然看到煎蛋网的"玩转firefox侧栏",才注意到它. Firefox侧栏有啥不一样? Firefox可以在侧栏中打开网页. 于是,一系列玩法就出来了... 侧栏打开在线应用 G ...

  6. CSS3多栏布局

    CSS3多栏布局 分栏数: column-count:auto|num: auto为默认值,表示元素只有一列.num取值为大于0的整数 每栏宽度: column-width:auto|<leng ...

  7. 使用django开发博客过程记录3——博客侧栏实现

    说起这个侧栏真是苦恼我很长时间,一开始以为和之前的一样传递额外参数就可以了就像下面这样: class IndexView(ListView): template_name = 'apps/index. ...

  8. jquery定时滑出可最小化的底部提示层

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...

  9. 一款jQuery打造的滚动条在底部滑出信息提示层

    一款jQuery打造的滚动条在底部滑出信息提示层, 当滚动鼠标滚轮,或者滚动条往下拉的时候,在右下角,弹出一个信息提示框. 有一点仿的是一个插件工具,就是网页中大家都长用到的友荐. 这款特效算一款简单 ...

随机推荐

  1. Python编码---转自金角大王

    本节内容 编码回顾 编码转换 Python的bytes类型 编码回顾 在备编码相关的课件时,在知乎上看到一段关于Python编码的回答 这哥们的这段话说的太对了,搞Python不把编码彻底搞明白,总有 ...

  2. oracle-Immediate

    从shutdown immediate命令发布起,禁止建立任何新的oracle连接 未提交的事务被回退.因此,处于一个事务中间的用户将失去所有未提交的劳动成果. oracle不等待客户断开连接.任何未 ...

  3. 利用 JavaScript SDK 部署网页版“Facebook 登录”

    facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...

  4. python 获取当前ip

    import socket # 获取本机计算机名称 hostname = socket.gethostname() # 获取本机ip ip = socket.gethostbyname(hostnam ...

  5. Java“类”的内存分配_case1

  6. Javascript 严格模式下不允许删除一个不允许删除的属性

    如下代码,在严格模式下,如果删除 Object.prototype 浏览器会报错,目前 IE10 也支持 严格模式. <script> "use strict"; de ...

  7. oracle函数 localtimestamp

    [功能]:返回会话中的日期和时间 [参数]:没有参数,没有括号 [返回]:日期 [示例]select localtimestamp from dual; 返回:14-11月-08 12.35.37.4 ...

  8. vue element 中自定义传值

    一直以来都不知道如何传自定义的值,一直只会默认的,今天终于找到方法了. 比如这个上传图片的控件,想带当前的index过去,就这样写.其它的类似 :http-request="(file,fi ...

  9. 云数据库 MySQL 8.0 重磅发布，更适合企业使用场景的RDS数据库

    点击订阅新品发布会! 新产品.新版本.新技术.新功能.价格调整,评论在下方,下期更新!关注更多内容,了解更多 最新发布 云数据库MySQL 8.0 升级发布会 2019年5月29日15时,阿里云云数据 ...

  10. 学习CSS预处理器Less

    1.Sass与Less的区别:Sass与Less的区别 2.Less的使用:Less的使用 3.Less的相关网址:Less.js.Less中文网 Less的HSL函数-lighten():HSL函数 ...