当前位置：首页 > 网站模板

58种jQuery模拟CSS3过渡页面切换特效

分类：日期：2023-07-03 点击(1) 评论(0)

简介

####浏览器兼容
Animsition需要支持CSS3的浏览器才能正常工作。

- IE10+
- Chrome
- Safari
- Firefox
####  使用方法
要使用该页面切换动画特效插件首先要引入相关的依赖文件。

```html

<link rel="stylesheet" href="./dist/css/animsition.min.css">
 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 

<script src="./dist/js/jquery.animsition.min.js"></script>   
```             
#####  HTML结构
如果所有页面都使用相同的切换过渡效果，当前页面用于显示切换效果的内容使用一个class为animsition的div进行包裹，使用带class为animsition-link的超链接或按钮来跳转页面。class名称可以修改，修改后后面的js代码也要做相应的修改。

```html
<body>
 
  <div class="animsition">
 
    <a href="./page1" class="animsition-link">animsition link 1</a>
 
    <a href="./page2" class="animsition-link">animsition link 2</a>
 
  </div>
 
</body>        
```
如果你希望每一个跳转页面的切换效果都不相同，可以使用下面的方法：

```html
<a
    href="./page1"
    class="animsition-link"
    data-animsition-out="fade-out-right"
    data-animsition-out-duration="2000"
  >
    animsition link 1
  </a>
 
  <a
    href="./page2"
    class="animsition-link"
    data-animsition-out="rotate-out"
    data-animsition-out-duration="500"
  >
    animsition link 2
  </a>            
```    
如果你希望每一个页面都使用不同的动画效果，可以使用下面的方法：

```html
<div
  class="animsition"
  data-animsition-in="fade-in"
  data-animsition-in-duration="1000"
  data-animsition-out="fade-out"
  data-animsition-out-duration="800"
>
  ...
</div>         
```       
#####  JAVASCRIPT
在页面加载之后，可以使用下面的方法来调用该插件：

```html
$(document).ready(function() {
   
  $(".animsition").animsition({
   
    inClass               :   'fade-in',
    outClass              :   'fade-out',
    inDuration            :    1500,
    outDuration           :    800,
    linkElement           :   '.animsition-link',
    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
    loading               :    true,
    loadingParentElement  :   'body', //animsition wrapper element
    loadingClass          :   'animsition-loading',
    unSupportCss          : [ 'animation-duration',
                              '-webkit-animation-duration',
                              '-o-animation-duration'
                            ],
    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
     
    overlay               :   false,
     
    overlayClass          :   'animsition-overlay-slide',
    overlayParentElement  :   'body'
  });
});            
```
上面的参数十分简单，看名称就可以知道它的意思。其中，inClass是进入时的页面动画方式，outClass是切换到其它页面时的动画方式。上面的代码是淡入淡出的进入和淡入淡出的切换到其它页面。要使用不同的效果，就更换这两个class。关于这些class共有58个，后面会一一列出。overlay是是否打开遮罩模式，如果设置为true，将会以遮罩的方式完成页面切换过渡。

另外，该页面切换过渡效果还有一组遮罩（Overlay）模式的class：

- overlay-slide-in-top
- overlay-slide-out-top
- overlay-slide-in-bottom
- overlay-slide-out-bottom
- overlay-slide-in-left
- overlay-slide-out-left
- overlay-slide-in-right
- overlay-slide-out-right

web299.com

58种jQuery模拟CSS3过渡页面切换特效

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面