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.
安装和使用
快速入门使用 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!"); } });
$('.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> ); } }
AniX 安装和使用 官网
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。