从左侧弹出:

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. Oracle 创建主键自增表

    200 ? "200px" : this.width)!important;} --> 介绍 本篇文章主要介绍在oracle中如果创建自增长表,这里要用到序列. create ...

  2. jenkins2 groovy脚本参考

    使用plugin生成groovy脚本,或者参考已有的groovy脚本. 文章来自:http://www.ciandcd.com文中的代码来自可以从github下载: https://github.co ...

  3. Mac系统下lipo, ar, nm等工具的使用简介

    引言 开发第三方库时, 如果没有进行特殊处理, 很容易把其他第三方库的符号暴露出来, 导致链接时产生符号重复. 如下图所示 如果用户链接了其他版本的libjpeg, 会因为入口地址不正确让程序直接崩溃 ...

  4. iOS开发-NSURLSession详解

    Core Foundation中NSURLConnection在2003年伴随着Safari浏览器的发行,诞生的时间比较久远,iOS升级比较快,AFNetWorking在3.0版本删除了所有基于NSU ...

  5. js解析格式化json日期

    代码: function jsonDateFormat(jsonDate) {//json日期格式转换为正常格式    try {        var date = new Date(parseIn ...

  6. js模块方案

    在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道js哪个模块会先加载,所以传入的返回函数除了返回函数本身,还可以返回为空对象. 自执行函数的处理方式: var module1 = (f ...

  7. JavaScript 语句 while

    while 语句用法 与for语句的用法之间的关系 for(i==1;i<5;i++) {document.write("12378<br />")  } 若使用 ...

  8. struts2从2.2.3升级到2.3.15.1步骤

    1. 删除以下jar包 asm-3.1.jar asm-commons-3.1.jar commons-beanutils-1.7.0.jar commons-fileupload-1.2.2.jar ...

  9. Postman测试Web API

    如何查看查询字符串? →输入包含查询字符串的URL,比如:http://localhost:54176/api/ProductCategories?name=darren&age=25→点击P ...

  10. SSH集成步骤

    1 在goodspeed.web.model下建立*类(空的构造,属性访问与设置),同时配置*.hbm.xml文件与数据库挂起来2 在goodspeed.web.dao建立*Dao和*Daoimpl类 ...