npm

Need private packages and team management tools?Check out npm Orgs. »

anix

0.3.1 • Public • Published

AniX

Super easy and lightweight transitions animation library.

Overview

AniX is a lightweight and easy-to-use animation library with excellent performance and good compatibility for modern browsers.

It uses the native css transition attribute, better than js simulation animation performance. And can use hardware acceleration.

AniX is less than 10k in size, and it does not change your coding habit as much as possible. There are multiple versions of the AniX option, umd version, jQuery version, Angular version, React version and Vue version...

Install and Include

Install and manage with npm.

$ npm install anix --save-dev
import { AniX } from 'anix';

anix

The umd version anix.umd.js. Check out the UMD repository for more details.

<script src="./js/anix.umd.ts" type="text/javascript"></script>

jQuery plugin anix.jq.js, that supports chain syntax.

<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/anix.jq.ts" type="text/javascript"></script>

Usage

use the pure AniX library.

AniX.to(dom, 1, {
    width: "200px",
    height: "100px",
    delay: 0.5,
    onComplete: function(){
       alert("over");
    }
});

use jquery plugin anix.jq.js

$('.con').css({'left':'0px'}).to(.5, {
    'left': Math.random() * $(window).width() + 'px',
    'background-color': getRandomColor()
});

Documentation

vist on https://a-jie.github.io/AniX/

the jquery plugin anix.jq.js

//AniX.to
$(..).to(time: number, args: {ease?:string; delay?:number; [propName:string]:any;})
 
//AniX.fromTo
$(..).fromTo(time: number, fromArgs: Object, toArgs: Object)
 
//AniX.kill
$(..).kill(complete?: boolean)
 
//AniX.get
$(..).getTransform(param: any)
 
//AniX.ease
$.ease.easeOut

about the React version react-anix

//1. import module
import { Anix } from 'react-anix';
 
<Anix 
  anis = {[
    { left: '120px', background: '#000', time: .5 },
    { background: color, width: 0, time: .5, onComplete: this.aniComplete.bind(this), disAppear: true },
    { time: .5, from: { width: '0px' }, to: { width: '350px', background: color, delay: .1 }, appear: true }
  ]}
    
  // or 
  ani={{ left:'20px', time:.5, delay: 1 }}
  
  // or 
  appear={{ left:'20px', time:.5 }}
  
  control animation play
  play={this.state.play}
  >
  ...
  </Anix>

about the Angular version ngxAni

//1. import module
import { NgxAniModule } from 'ngxani';
 
//2. set ngModule
@NgModule({
    imports: [BrowserModule, NgxAniModule]
    ... ...
 
//3. import service
import { NgxAni } from 'ngxani';
 
//4. constructor
constructor(private ngxAni: NgxAni) { }
 
//5. use
//<button (click)="animation(rect)">click animate</button>
//<div class="rect" #rect></div>
private animation(dom: ElementRef) {
  this.ngxAni.to(dom, 1, {
      width: "200px",
      height: "100px"
  });
}

Test and Build

build all task

git clone git@github.com:a-jie/AniX.git
npm install
npm run all

build jq and umd

npm run jq
npm run umd

test and build example (the document page) made by create-react-app

cd ./example
npm install
npm start
npm run build

view on http://localhost:3000/

debug the test page

view the ./test/test.html

License

The BSD License.

install

npm i anix

Downloadsweekly downloads

8

version

0.3.1

license

BSD

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability