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

发布于 2018-11-26 21:26:03 字数 3382 浏览 2909 评论 0

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.

示例和官网

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。