帮酷LOGO
  • 显示原文与译文双语对照的内容
Super easy and lightweight transitions animation library

  • 源代码名称:AniX
  • 源代码网址:http://www.github.com/a-jie/AniX
  • AniX源代码文档
  • AniX源代码下载
  • Git URL:
    git://www.github.com/a-jie/AniX.git
  • Git Clone代码到本地:
    git clone http://www.github.com/a-jie/AniX
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/a-jie/AniX
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • logo

    AniX - 一个超级轻松且轻量级的css动画库。

    概述

    AniX是一个轻量级和easy-to-use动画库,具有出色的性能和对现代浏览器的良好兼容性。

    它使用本机收费的css转换属性,比js模拟动画性能好。 你也可以用它来加速硬件加速。

    AniX只有 LESS,大小为 3k(gzip) 。 它几乎达到了任何其他巨大的动画库的效果。

    观看演示,请点击这里的

    code

    安装并包括

    安装和导入 anix 。
    $ npm install anix --save-dev
    ...
    import { AniX } from 'anix';

    anix

    使用umd版本 anix.umd.js 。 查看 UMD 知识库了解更多细节。
    <scriptsrc="./js/anix.umd.ts"type="text/javascript"></script>
    使用jQuery插件 anix.jq.js,支持链语法。
    <scriptsrc="./js/jquery.min.js"type="text/javascript"></script>
    <scriptsrc="./js/anix.jq.js"type="text/javascript"></script>

    用法

    基本用法。
    AniX.to(dom, 1, {
     x:300,
     y:10,
     scale:2,
     delay:0.5,
     onComplete:function(){
     alert("over");
     }
    });// or AniX.to(dom, 1, {
     "width":"200px",
     "background-color":"#ffcc00",
     "ease":AniX.ease.easeOutBack,
     "onComplete": () => {
     //STATE : COMPLETED!console.log("STATE : COMPLETED!");
     }
    });
    使用插件的jQuery插件,使用anix.jq.js 。
    $('.demo').css({'left':'0px'}).to(.5, {
     'left':'500px',
     'background-color':'#ffcc00'});

    文档

    请访问 通用文档访问 https://a-jie.github.io/AniX/文档中的jQuery插件如下所示
    //like AniX.to$(..).to(time: number, args: {ease?:string; delay?:number; [propName:string]:any;})//like AniX.fromTo$(..).fromTo(time: number, fromArgs:Object, toArgs:Object)//like AniX.kill$(..).kill(complete?: boolean)//like AniX.get$(..).getTransform(param: any)//like AniX.ease$.ease.easeOut

    测试和构建

    安装和构建所有任务
    git clone git@github.com:a-jie/AniX.git
    npm install
    npm run all
    构建jquery或者umd版本
    npm run jq
    npm run umd
    演示示例是使用create-react-app
    cd./example
    npm install
    npm start
    npm run build

    然后打开 http://localhost:3000/

    使用测试用例

    查看 ./test/test.html

    其他

    当然,这里还有其他版本,当然不需要。 Angular 版本反应版本和Vue版本。

    许可证

    许可证许可证。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语