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

BSD
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>
        );
    }
}
加载中

评论(1)

ajiecn
ajiecn 软件作者

暂无资讯

暂无问答

暂无博客

返回顶部
顶部