AniX.js是一个小型（<3kb gzipped）但高性能的JavaScript动画库，用于使用原生CSS和CSS3属性（例如颜色、背景、旋转、翻转等）对任何DOM元素进行动画制作。

更多功能：

• 提供jQuery或Vanilla JavaScript插件。
• 也可作为React组件使用。
• 兼容模式。兼容旧浏览器，旧浏览器没有动画。
• 使用settimeout或css transtionend事件。
• 简化功能。

如何使用它:

1.安装并导入AniX.js库。

# NPM
$ npm install anix --save

import { AniX } from 'anix';

2.或者直接在文档中包含AniX.js库。

<!-- As a Vanilla JS plugin -->
<script src="/path/to/dist/umd/anix.umd.js"></script>
 
<!-- As a jQuery plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jq/anix.jq.js"></script>

3.通过更改CSS属性来制作DOM元素的动画。可能的参数：

• 标高：任何DOM元素
• 时间：动画的持续时间
• 参数：CSS样式和配置

// As a Vanilla JS plugin -->
AniX.to(element,.5,{
  height:"100px",
  // more CSS styles and options here
});
 
//  As a jQuery plugin
$('.element').to(.5, {
  'left': Math.random() * $(window).width() + 'px',
  'background-color': getRandomColor(),
  // more styles and options here
});

4.将DOM元素从一种样式动画化为另一种样式。

• 标高：任何DOM元素
• 时间：动画的持续时间
• 来自Args：CSS样式和配置
• 至Args：CSS样式和配置

// As a Vanilla JS plugin
AniX.fromTo(element,.5,{height:"200px"},{height:"100px"});
 
// As a jQuery plugin
$('.element').fromTo(.5, {color:'#ffcc00'}, {color:'#000'});

5.对动画应用延迟。

AniX.to(element,.5,{
  height:"100px",
  delay:0.3,
  // more CSS styles and options here
});

6.对动画应用缓和功能。所有可能的缓解功能：

1. 线性的
2. 地上基础设施
3. 地役权输入
4. 画外音
5. 画质输入输出
6. 画外立方体
7. 画质输入输出立方
8. 地役权
9. 地外循环
10. 地上输入输出电路
11. 画板输入四边形
12. 画外四元
13. 画板输入输出四元
14. 地役权InQuart
15. 画外四分之一
16. 地上输入输出四分之一
17. 地役权InQuint
18. 画外音
19. 地役权输入输出
20. 画质InSine
21. 画外正弦
22. 输入输出正弦
23. 画架返回
24. 画外音返回
25. 画板输入输出返回

AniX.to(element,.5,{
  height:"100px",
  "ease": AniX.ease.easeOutBack,
  // more CSS styles and options here
});

7.将在动画开始/结束时触发的回调函数。

AniX.to(element,.5,{
  height:"100px",
  onComplete: function(){
    alert("over");
  },
  onStart: function(){
    alert("start");
  },
  // more CSS styles and options here
});

8.API方法。

// kill the instance
AniX.kill(dom);
$('.element').kill(complete?: boolean)
 
// get transform
AniX.getTransform(InputValue);
$('.element').getTransform(InputValue)
 
// use nativecss transtionend event
AniX.useTranstionEvent = true;
 
// Compatible with old browsers, old browsers do not have animation
AniX.compatible = true;
 
// Debug mode
AniX.debug = true;
 
// Check if has css Transition?
console.log(AniX.support);

更新日志：

v1.3.7 (2022-02-05)

• 使现代化

v1.3.6 (2021-08-29)

• 升级版本并修改多个配置

预览截图

Performant CSS动画操作库 AniX.js