Animsition 为页面切换增加 CSS3 动画效果的 jQuery 插件

Question

Animsition 是一个 jQuery 插件，可轻松的为页面切换增加 CSS 动画效果，提供 18 种不同的动画风格，使用方便，有多个选项可供选择，可以满足用户对动画的特殊要求。这种动画特效可以应用到任何网站，内部链接使用简单的CSS类，也可以使用不同的效果在同一页面上。

动画效果

Animsition 提供 18 种不同的动画风格，他们就是：

fade

fade-in、、fade-out、fade-in-up、fade-out-up、fade-in-down、fade-out-down、fade-in-left、fade-out-left、fade-in-right、fade-out-right

Rotate

rotate-in、rotate-out

Flip

flip-in-x、flip-out-x、flip-in-y、flip-out-y

Zoom

zoom-in、zoom-out

安装方法

Install : nodejs npm grunt jekyll ruby bower

$ git clone https://github.com/blivesta/animsition.git
$ cd animsition
$ git checkout -b patch-1
$ npm install && grunt build && grunt

Build

$ grunt build

Watch & Connect

$ grunt

CDN加速

您可以使用 CDNJS 网站的 CDN 加速地址：

https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/css/animsition.css
https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/css/animsition.css.map
https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/css/animsition.min.css
https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/js/jquery.animsition.js
https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/js/jquery.animsition.min.js

使用方法

加载所需的 jQuery JavaScript 库和 jQuery 插件在您的网页 Animsition。

<script src="jquery.min.js"></script>
<script src="animsition.min.js"></script>

在网页的头部所需的 CSS 文件加载。

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

使你的 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^=#])'
        touchSupport  :    true, 
        loading       :    true,
        loadingParentElement  :   'body', //animsition wrapper element
        loadingClass  :   'animsition-loading',
        unSupportCss  : [ 'animation-duration',
          '-webkit-animation-duration',
          '-o-animation-duration'
        ],
        overlay       :   false,
        overlayClass  :   'animsition-overlay-slide',
        overlayParentElement  :   'body'
    });
});

This awesome jQuery plugin is developed by blivesta. For more Advanced Usages, please check the demo page or visit the official website.

示例和官网

• 官方问站：http://git.blivesta.com/animsition/
• Github地址：https://github.com/blivesta/animsition