html 网页跳转动画,CSS3+js实现web页面切换动画

首先是效果展示图！

一共有两个页面~代码方面差别并不是很大。所以我只讲解其中一个页面。

上代码。

index.html

点击切换页面

css_index.css

*{

padding: 0;

margin: 0;

}

#all{

position: absolute;

left: -100vw;

transition:left 1s;

-moz-transition:left 1s;/* Firefox 4 */

-webkit-transition:left 1s; /* Safari and Chrome */

-o-transition:left 1s; /* Opera */

}

js_index.js

$(document).ready(function(){

window.setTimeout('goin()',1);

$('#change').click(function(){

goout();

window.setInterval("window.location.href = "1.html"",1000);

})

})

function goin(){

$('#all').css({left:"0vw"})

}

function goout(){

$('#all').css({left:"-100vw"})

}

页面切换的动画效果实现的核心之处在于CSS3提供的动画过渡效果

transition:left 1s;

-moz-transition:left 1s;/* Firefox 4 */

-webkit-transition:left 1s; /* Safari and Chrome */

-o-transition:left 1s; /* Opera */

没错！transition就是实现的关键~~~！

至于-moz- -wekit- -o-这些前缀是针对不同浏览器用来适配的~

闲来讲解一下transition的用法吧

transition:css time;

css=代表赋予动画的CSS样式，time=代表动画的过度时间

比如transition:width 1s;

意思当宽度发生变化的时候，会有1s的时间过度。

比如宽度10px变成100px,在上述css的修饰下，10px并不会瞬间变成100px;会在1s内从10px逐渐变成100px;示意图如下

再来谈谈JS，window.setTimeout(a,b)

a=要执行的函数或者语句

b=延迟的时间

注意！！！！setTimeout中的a是在延时b后只执行一次

而setInterval是每隔b执行一次a!

为什么我们要把页面的进入动画延时1ms执行页面的goin动画呢？

因为如果不延迟1ms是看不见动画的，JS会在预加载的时间就把你函数里的内容执行了，也就是说你改变的left或者top值会直接跳过transition,并不会产生对应的效果~

那么为什么页面的切出动画可以直接用gout函数呢，因为那是在页面加载完成以后触发了点击事件以后才会执行的函数，这个时候页面已经加载完成了，就不会跳过transition~

那么为什么在goout中要延时1s执行window.location.href呢？

因为我们在css样式表中设置了动画的时间为1s。如果直接执行window.location.href的话，就看不见页面切换动画了，会直接跳转到指定的页面。

如果延迟时间小于1s会导致动画没有执行完全就切换的下一个页面，可能会影响美观~

当然你有特殊需求也可以自行抉择~~~！

下面附上打包后可以直接运行代码的下载地址和transition参考~

打包代码：

transiton参考：