Animsition 为页面切换增加 CSS3 动画效果的 jQuery 插件 - 资源分享

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

发布于 2018-11-26 字数 3598 浏览 2625 评论 0

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

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

动画效果

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.

示例和官网

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0