AniX 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
AniX 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: TypeScript 查看源码 »
操作系统: 跨平台
收录时间: 2017-01-28
提 交 者: ajiecn

AniX 是一款高性能的 css3 动画组件。

它非常简单和易于使用. 同时又具有很好的兼容性。

It uses the native css transition attribute, better than js simulation animation performance. And you can also enable hardware acceleration with it.

安装和使用

快速入门使用 npm 安装和管理 NgxAni。

$ npm install anix --save

导入和使用 NgxAni 库。

import { AniX } from 'anix';
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 plug-in usage anix.jq.js

$('.demo').css({'left':'0px'}).to(.5, {
    'left': '500px',
    'background-color': '#ffcc00'
});

Use in react(v16+)

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
        this.clickHandler = this.clickHandler.bind(this);
    }

    clickHandler(e) {
        const node = this.myRef.current;
        // animation
        AniX.to(node, 1, {
            x: 300,
            y: 10,
            scale: 2
        });
    }

    render() {
        return (
            <div>
                <div ref={this.myRef} />
                <button onClick={this.clickHandler}></button>
            </div>
        );
    }
}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

AniX 的相关资讯

还没有任何资讯

AniX 的相关博客

还没有任何博客,写博客

AniX 的相关问答

还没有任何问答,马上提问

评论 (1)

加载中
ajiecn软件作者
打分: 力荐
2017/01/30 15:36
回复
举报
更多评论
1 评论
32 收藏
分享
返回顶部
顶部