从左侧弹出:

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. C#分布式缓存二:Asp.Net中使用Couchbase

    前言 上一篇<C#分布式缓存一:Couchbase的安装与简单使用>主要讲解对Couchbase服务端的安装配置和客户端的引用调用,通过代码来完成最简单的实现调用.本次通过简单的配置,来完 ...

  2. 解决“在多字节的目标代码页中,没有此Unicode字符可以映射到的字符”

    今天在处理Google网站管理员中的500错误时发现这样一些URL: http://www.cnblogs.com/Garnai/tag/3D%3F%96%CA/ http://www.cnblogs ...

  3. C语言 线性表 链式表结构 实现

    一个单链式实现的线性表 mList (GCC编译). /** * @brief 线性表的链式实现 (单链表) * @author wid * @date 2013-10-21 * * @note 若代 ...

  4. libevent (三) 事件注册与循环监听

    事件注册与循环监听 在libevent中为了监听某种事件的发生,设置事件触发后的回调函数,也就是说对该事件注册到当前的IO模型中. 事件注册 事件初始化 使用`event_new`函数来对事件进行初始 ...

  5. hibernate对象三种状态

    在Hibernate中,对象有三种状态:临 时状态(Transient).持久状态(Persistent)和游离状态(Detached). 处于持久态的对象也称为 PO(PersistenceObje ...

  6. 深究JS异步编程模型

    前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...

  7. webView文本长按显示英文

    webView文本长按显示英文时,在info.plist文件中添加如下内容: <key>CFBundleLocalizations</key> <array> &l ...

  8. Linux-vmware tools安装与cdrom挂载

    前述 昨天想直接复制虚拟机centos系统中命令行的内容到主机的txt文档上进行保存,发现不能实现虚拟机与主机之间的直接通讯,后来查资料发现原来是由于我的虚拟机没有安装vwmare tools的缘故. ...

  9. Leetcode 234 Palindrome Linked List 链表

    判断链表是否是回文. 我直接将链表的一半进行倒置,然后将两半的链表进行比较 /** * Definition for singly-linked list. * struct ListNode { * ...

  10. jquery parent和parents的区别

    从字面上不难看出parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选可以 ...