从左侧弹出:

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. 修改注册表来修改IE的设置---资料汇总

    原文链接: http://blog.csdn.net/wangqiulin123456/article/details/17068649 附带批处理执行脚本: @echo off &title ...

  2. 深入理解java虚拟机【类加载机制】

    Java虚拟机类加载过程是把Class类文件加载到内存,并对Class文件中的数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型的过程. 在加载阶段,java虚拟机需要完成以下 ...

  3. [ACM_图论] Highways (变形说法的最小生成树)

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28972#problem/C 题目给出T种情况,每种情况有n个城镇,接下来每一行是第i个城 ...

  4. Why we need model on Django ?

    step01: create a database name as (django_db) on mysql ... step02: configure your django to use the ...

  5. atitit.获取北京时间CST 功能api总结 O7

    atitit.获取北京时间CST 功能api总结 O7 1. 获取cst时间(北京时间)两布:1.抓取url timtstamp >>format 到cst 1 2. 设置本机时间  se ...

  6. iOS图片加载速度极限优化—FastImageCache解析

    FastImageCache是Path团队开发的一个开源库,用于提升图片的加载和渲染速度,让基于图片的列表滑动 优化点 iOS从磁盘加载一张图片,使用UIImageVIew显示在屏幕上,需要经过以下步 ...

  7. [轻微]WEB服务器启用了OPTIONS方法/如何禁止DELETE,PUT,OPTIONS等协议访问应用程序/tomcat下禁用不安全的http方法

    使用了360网站安全检测 查到有OPTIONS方法 百度了下 https://my.oschina.net/maliang0130/blog/338725 找到这个方法奈何http.conf 找不到无 ...

  8. Maven学习总结(八)——使用Maven构建多模块项目

    在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最常见的就是分为domain(域模型层).dao(数据库访问层).service(业务逻辑层).web(表现层),这样分层之 ...

  9. (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

  10. maven nexus-staging-maven-plugin exception-connect timed out

    不知道是国内的网络的问题还是别的原因,在deploy一个maven的artifact到oss server的时候总是报错: Failed to execute goal org.sonatype.pl ...