AniX

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

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

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

安装和使用

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>
        );
    }
}