从左侧弹出:

var windowWidth = window.innerWidth;
$(atlas_list).css({ "transition":"none","-webkit-transition":"none","transform": "translate3d(" + (windowWidth) + "px,0,0)" });
window.setTimeout(function(){
$(atlas_list).css({ "transition":"all 0.5s ease","-webkit-transition":"all 0.5s ease","transform": "translate3d(0,0,0)" });
},5);

点击之后消失:

$(atlas_list).css({ "transition":"all 0.5s ease","-webkit-transition":"all 0.5s ease","transform": "translate3d(" + (windowWidth) + "px,0,0)" });
window.setTimeout(function(){
document.body.removeChild(atlas_list);
},600);

CSS3 页面跳转的动画效果的更多相关文章

  1. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  2. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  3. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  4. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  5. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

  6. [UWP小白日记-9]页面跳转过度动画(二)

    又打算动手写了 [UWP小白日记-6]页面跳转过度动画 上次写的,这次随着学习的进度使用新的玩法. 最近在搞GIT的学习,结果把好好的项目玩坏,都不知道当时是怎么想的拿在写的APP来玩GIT,害我重写 ...

  7. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  8. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  9. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

随机推荐

  1. django rest_framework--入门教程3

    rest_framwork 之post 与put rest_framwork可以接受post与put delete get请求,可以对资源进行刚CRUD,以一个DEMO为例, 1.先在VIEW里定义一 ...

  2. protobuf-net 与 C#中几种序列化的比较

    C#中几种序列化的比较,此次比较只是比较了 序列化的耗时和序列后文件的大小. 几种序列化分别是: 1. XmlSerializer 2. BinaryFormatter 3. DataContract ...

  3. Helios与Katana的区别

    Helios与Katana都是微软开发的基于IIS的OWIN实现. 它们之间的区别很简单:Helios不依赖于ASP.NET Runtime,Katana依赖于ASP.NET Runtime. Hel ...

  4. 设计模式之美:Chain of Responsibility(职责链)

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):实现后继者链. 意图 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系. 将这些对象连成一条链,并沿着这条 ...

  5. 【UML】如何看Android的UML图

    UML图有很多类型,这里只讨论最重要也最常用的两种 - 类图和时序图. 1. 类图 通过类图,我们可以很容易的了解代码架构,理清模块之间的关系, 包括继承(Inheritance),实现(realiz ...

  6. paip.c3p0 数据库连接池 NullPointerException 的解决...

    paip.c3p0 数据库连接池 NullPointerException 的解决... 程序ide里面运行正常..外面bat运行错误.. 作者Attilax  艾龙,  EMAIL:14665198 ...

  7. HTTP协议和几种常见的状态码

    前言:明知山有釜,偏向釜山行-----电影<釜山行> ------------------------------------------------------------------- ...

  8. Linux中如何产生core文件?

      在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息).使用gdb来查看core文件,可以指示出导致程序出错的代码所在文件和行数.   1.core文件 ...

  9. 解决安卓SDK更新连不通问题

    http://wenku.baidu.com/link?url=d7t81OFF4_o2YF9iBne-azyovROGPGOozMgWKNyAIQK8vtI0mIjvzpfdOXg7KOobu202 ...

  10. VC++注册,卸载OCX控件,以及判断是否注册

    注册OCX控件 BOOL CYourClass::RegistOcx() { HINSTANCE hLib = LoadLibrary("NTGraph.ocx");      / ...