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!"); } });
anix.jq.js
$('.demo').css({'left':'0px'}).to(.5, { 'left': '500px', 'background-color': '#ffcc00' });
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> ); } }