anix - npm Package Compare versions

Comparing version 0.2.3 to 0.3.1

anix.d.ts

@@ -21,3 +21,3 @@ import { IEase } from './ease';
 export declare class AniXClass {
-    private keyword;
+    private KEYWORDS;
     private anis;
@@ -69,7 +69,10 @@ useTranstionEvent: boolean;
     /**
-    * get pure style
+    * get pure css2 style
     */
-    private getPureStyle(args);
+    private getNormalStyles(args);
+    private notKeyWords(key);
+    private each(args, func);
+    private pretreatment(args);
 }
 declare let AniX: AniXClass;
 export { AniX };

anix.js

 "use strict";
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -24,5 +32,5 @@ var dic_1 = require("./dic");
 */
-var AniXClass = (function () {
+var AniXClass = /** @class */ (function () {
     function AniXClass() {
-        this.keyword = ['nokill', 'ease', 'delay', 'all', 'class', 'onStart', 'onUpdate', 'onComplete'];
+        this.KEYWORDS = ['nokill', 'ease', 'delay', 'all', 'class', 'onStart', 'onUpdate', 'onComplete'];
         this.anis = {};
@@ -46,2 +54,3 @@ this.useTranstionEvent = false;
     AniXClass.prototype.to = function (ele, time, args) {
+        args = this.pretreatment(args);
         var transition = '';
@@ -56,3 +65,3 @@ var styles = this.getPureStyleKeys(args);
                     var prefix = cssx_1.CssX.getPrefix(2);
-                    transition += prefix + 'transform';
+                    transition += prefix + "transform";
                 }
@@ -82,2 +91,3 @@ }
         this.kill(ele);
+        fromArgs = this.pretreatment(fromArgs);
         this.setStyle(ele, fromArgs);
@@ -136,6 +146,7 @@ setTimeout(function () { _this.to(ele, time, toArgs); }, 22.2);
         ele = gethtmlelement_1.getHTMLElement(ele);
-        //add style
-        cssx_1.CssX.css(ele, this.getPureStyle(args));
-        //add class
-        args.className && cssx_1.CssX.addClass(ele, args.className);
+        if (!isNull(args)) {
+            cssx_1.CssX.css(ele, this.getNormalStyles(args));
+            //add class
+            args.className && cssx_1.CssX.addClass(ele, args.className);
+        }
     };
@@ -172,22 +183,48 @@ /**
         var keys = [];
-        for (var key in args) {
-            if (this.keyword.indexOf(key) < 0)
-                keys.push(key);
-        }
+        this.each(args, function (key) { return keys.push(key); });
         return keys;
     };
     /**
-    * get pure style
+    * get pure css2 style
     */
-    AniXClass.prototype.getPureStyle = function (args) {
-        var obj = {};
+    AniXClass.prototype.getNormalStyles = function (args) {
+        var styles = {};
+        this.each(args, function (key) { return styles[key] = args[key]; });
+        return styles;
+    };
+    AniXClass.prototype.notKeyWords = function (key) {
+        return this.KEYWORDS.indexOf(key) < 0;
+    };
+    AniXClass.prototype.each = function (args, func) {
         for (var key in args) {
-            if (this.keyword.indexOf(key) < 0)
-                obj[key] = args[key];
+            if (this.notKeyWords(key))
+                func(key);
+            ;
         }
-        return obj;
     };
+    AniXClass.prototype.pretreatment = function (args) {
+        var cArgs = {};
+        var transformArgs = {};
+        for (var key in args) {
+            if (!gettransform_1.isTransformStyle(key))
+                cArgs[key] = args[key];
+            else
+                transformArgs[key] = args[key];
+        }
+        if (!isNull(transformArgs))
+            cArgs = __assign({}, cArgs, gettransform_1.getTransform(transformArgs));
+        return cArgs;
+    };
     return AniXClass;
 }());
 exports.AniXClass = AniXClass;
+var isNull = function (styles) {
+    if (!styles)
+        return true;
+    var index = 0;
+    for (var key in styles) {
+        index++;
+    }
+    return index == 0;
+};
 //export instance
@@ -194,0 +231,0 @@ var AniX = new AniXClass();

cssx.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var CssXClass = (function () {
+var CssXClass = /** @class */ (function () {
     function CssXClass() {
@@ -5,0 +5,0 @@ this.pfObj = {};

dic.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var gethtmlelement_1 = require("./gethtmlelement");
-var Dic = (function () {
+var Dic = /** @class */ (function () {
     function Dic() {
@@ -37,7 +37,7 @@ }
     };
+    Dic.map = {};
     return Dic;
 }());
-Dic.map = {};
 exports.Dic = Dic;
 ;
 //# sourceMappingURL=dic.js.map

gettransform.d.ts

@@ -21,1 +21,3 @@ import { ITransform } from './cssx';
 }
+export declare function isTransformStyle(key: string): boolean;
+export declare function hasTransformStyle(args: any): boolean;

gettransform.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var KEYWORDS = [
+    'x', 'y', 'z',
+    'scaleX', 'scaleY', 'scaleZ', 'scale',
+    'rotateX', 'rotateY', 'rotateZ', 'rotate',
+    'skewX', 'skewY'
+];
 function getTransform(param) {
@@ -72,2 +78,15 @@ var transform = "";
 exports.getTransform = getTransform;
+function isTransformStyle(key) {
+    return KEYWORDS.indexOf(key) > -1;
+}
+exports.isTransformStyle = isTransformStyle;
+function hasTransformStyle(args) {
+    var has = false;
+    for (var key in args) {
+        if (isTransformStyle(key))
+            has = true;
+    }
+    return has;
+}
+exports.hasTransformStyle = hasTransformStyle;
 function getPX(param, key) {
@@ -74,0 +93,0 @@ var px = typeof param[key] === "string" ? param[key] : (param[key] || 0) + 'px';

package.json

 {
   "name": "anix",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "license": "BSD",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 # AniX
 
-Super easy and lightweight transitions animation library。
+Super easy and lightweight transitions animation library.
 
@@ -11,3 +11,3 @@ ## Overview
 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](https://github.com/a-jie/AniX/blob/master/dist/umd/anix.umd.js), [jQuery version](https://github.com/a-jie/AniX/blob/master/dist/jq/anix.jq.js) and [react version](https://github.com/a-jie/react-anix)...
+There are multiple versions of the AniX option, [umd version](https://raw.githubusercontent.com/a-jie/AniX/master/dist/umd/anix.umd.js), [jQuery version](https://raw.githubusercontent.com/a-jie/AniX/master/dist/jq/anix.jq.js), [Angular version](https://github.com/a-jie/NgxAni), [React version](https://github.com/a-jie/react-anix) and [Vue version](https://github.com/GeoffZhu/vue-anix)...
 
@@ -18,6 +18,6 @@ ## Install and Include
 
+```bash
+$ npm install anix --save-dev
 ```
-$ npm install anix --save-dev
-...
-
+```js
 import { AniX } from 'anix';
@@ -29,3 +29,3 @@ ```
 
-```
+```html
 <script src="./js/anix.umd.ts" type="text/javascript"></script>
@@ -36,3 +36,3 @@ ```
 
-```
+```html
 <script src="./js/jquery.js" type="text/javascript"></script>
@@ -46,3 +46,3 @@ <script src="./js/anix.jq.ts" type="text/javascript"></script>
 
-```
+```js
 AniX.to(dom, 1, {
@@ -59,3 +59,3 @@ width: "200px",
 
-```
+```js
 $('.con').css({'left':'0px'}).to(.5, {
@@ -70,4 +70,4 @@ 'left': Math.random() * $(window).width() + 'px',
 
-#### the jquery plugin anix.jq.js Api
-```
+#### the jquery plugin [anix.jq.js](https://github.com/a-jie/AniX/blob/master/dist/jq/anix.jq.js)
+```js
 //AniX.to
@@ -77,3 +77,3 @@ $(..).to(time: number, args: {ease?:string; delay?:number; [propName:string]:any;})
 //AniX.fromTo
-$(..).to(time: number, fromArgs: Object, toArgs: Object)
+$(..).fromTo(time: number, fromArgs: Object, toArgs: Object)
 
@@ -90,7 +90,59 @@ //AniX.kill
 
+#### about the React version [react-anix](https://github.com/a-jie/react-anix)
+```js
+//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](https://github.com/a-jie/NgxAni)
+```js
+//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
-```
+```bash
 git clone [e-mail]:a-jie/AniX.git
@@ -102,3 +154,3 @@ npm install
 #### build jq and umd
-```
+```bash
 npm run jq
@@ -110,3 +162,3 @@ npm run umd
 
-```
+```bash
 cd ./example
@@ -124,2 +176,2 @@ npm install
 
-[The BSD License](https://opensource.org/licenses/BSD-3-Clause).
+[The BSD License](https://opensource.org/licenses/BSD-3-Clause).

No alert changes

Improved metrics

Total package byte prevSize

50658

increased by11.06%

Lines of code

802

increased by8.23%

Number of lines in readme file

166

increased by46.9%

No dependency changes