ng2-animate - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/animations/bounce.d.ts

@@ -1,2 +0,2 @@
-import { AnimationEntryMetadata } from '@angular/core';
-export declare const bounce: AnimationEntryMetadata;
+import { AnimationStateTransitionMetadata } from '@angular/core';
+export declare const bounce: (timing: string) => AnimationStateTransitionMetadata[];

dist/animations/bounce.js

 "use strict";
 var core_1 = require('@angular/core');
-var config_1 = require('../config');
-exports.bounce = core_1.trigger('bounce', [
-    core_1.transition('void => in', [
-        core_1.animate(config_1.duration, core_1.keyframes([
+exports.bounce = function (timing) { return [
+    core_1.transition('* => bounceIn', [
+        core_1.animate(timing, core_1.keyframes([
             core_1.style({ opacity: 0, transform: 'scale3d(.3, .3, .3)', offset: 0 }),
@@ -15,4 +14,4 @@ core_1.style({ transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.2 }),
     ]),
-    core_1.transition('in => void', [
-        core_1.animate(config_1.duration, core_1.keyframes([
+    core_1.transition('bounceIn => void', [
+        core_1.animate(timing, core_1.keyframes([
             core_1.style({ transform: 'scale3d(.9, .9, .9)', offset: 0.2 }),
@@ -23,20 +22,20 @@ core_1.style({ opacity: 1, transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.5 }),
     ]),
-    core_1.transition('void => inDown', [
-        core_1.animate(config_1.duration, core_1.keyframes([
-            core_1.style({ opacity: 0, transform: 'translate3d(0, 1000px, 0)', offset: 0 }),
-            core_1.style({ opacity: 1, transform: 'translate3d(0, -20px, 0)', offset: 0.6 }),
-            core_1.style({ transform: 'translate3d(0, 10px, 0)', offset: 0.75 }),
-            core_1.style({ transform: 'translate3d(0, -5px, 0)', offset: 0.9 }),
+    core_1.transition('* => bounceInDown', [
+        core_1.animate(timing, core_1.keyframes([
+            core_1.style({ opacity: 0, transform: 'translate3d(0, -1000px, 0)', offset: 0 }),
+            core_1.style({ opacity: 1, transform: 'translate3d(0, 20px, 0)', offset: 0.6 }),
+            core_1.style({ transform: 'translate3d(0, -10px, 0)', offset: 0.75 }),
+            core_1.style({ transform: 'translate3d(0, 5px, 0)', offset: 0.9 }),
             core_1.style({ transform: 'translate3d(0, 0, 0)', offset: 1 })
         ]))
     ]),
-    core_1.transition('inDown => void', [
-        core_1.animate(config_1.duration, core_1.keyframes([
-            core_1.style({ transform: 'translate3d(0, -10px, 0)', offset: 0.2 }),
-            core_1.style({ opacity: 1, transform: 'translate3d(0, 20px, 0)', offset: 0.5 }),
-            core_1.style({ opacity: 0, transform: 'translate3d(0, -1000px, 0)', offset: 1 })
+    core_1.transition('bounceInDown => void', [
+        core_1.animate(timing, core_1.keyframes([
+            core_1.style({ transform: 'translate3d(0, 10px, 0)', offset: 0.2 }),
+            core_1.style({ opacity: 1, transform: 'translate3d(0, -20px, 0)', offset: 0.5 }),
+            core_1.style({ opacity: 0, transform: 'translate3d(0, 1000px, 0)', offset: 1 })
         ]))
     ]),
-    core_1.transition('void => inLeft', [
-        core_1.animate(config_1.duration, core_1.keyframes([
+    core_1.transition('* => bounceInLeft', [
+        core_1.animate(timing, core_1.keyframes([
             core_1.style({ opacity: 0, transform: 'translate3d(-1000px, 0, 0)', offset: 0 }),
@@ -49,4 +48,4 @@ core_1.style({ opacity: 1, transform: 'translate3d(20px, 0, 0)', offset: 0.6 }),
     ]),
-    core_1.transition('inLeft => void', [
-        core_1.animate(config_1.duration, core_1.keyframes([
+    core_1.transition('bounceInLeft => void', [
+        core_1.animate(timing, core_1.keyframes([
             core_1.style({ opacity: 1, transform: 'translate3d(-20px, 0, 0)', offset: 0.2 }),
@@ -56,4 +55,4 @@ core_1.style({ opacity: 0, transform: 'translate3d(1000px, 0, 0)', offset: 1 })
     ]),
-    core_1.transition('void => inRight', [
-        core_1.animate(config_1.duration, core_1.keyframes([
+    core_1.transition('* => bounceInRight', [
+        core_1.animate(timing, core_1.keyframes([
             core_1.style({ opacity: 0, transform: 'translate3d(1000px, 0, 0)', offset: 0 }),
@@ -66,4 +65,4 @@ core_1.style({ opacity: 1, transform: 'translate3d(-20px, 0, 0)', offset: 0.6 }),
     ]),
-    core_1.transition('inRight => void', [
-        core_1.animate(config_1.duration, core_1.keyframes([
+    core_1.transition('bounceInRight => void', [
+        core_1.animate(timing, core_1.keyframes([
             core_1.style({ opacity: 1, transform: 'translate3d(20px, 0, 0)', offset: 0.2 }),
@@ -73,19 +72,19 @@ core_1.style({ opacity: 0, transform: 'translate3d(-1000px, 0, 0)', offset: 1 })
     ]),
-    core_1.transition('void => inUp', [
-        core_1.animate(config_1.duration, core_1.keyframes([
-            core_1.style({ opacity: 0, transform: 'translate3d(0, -1000px, 0)', offset: 0 }),
-            core_1.style({ opacity: 1, transform: 'translate3d(0, 20px, 0)', offset: 0.6 }),
-            core_1.style({ transform: 'translate3d(0, -10px, 0)', offset: 0.75 }),
-            core_1.style({ transform: 'translate3d(0, 5px, 0)', offset: 0.9 }),
+    core_1.transition('* => bounceInUp', [
+        core_1.animate(timing, core_1.keyframes([
+            core_1.style({ opacity: 0, transform: 'translate3d(0, 1000px, 0)', offset: 0 }),
+            core_1.style({ opacity: 1, transform: 'translate3d(0, -20px, 0)', offset: 0.6 }),
+            core_1.style({ transform: 'translate3d(0, 10px, 0)', offset: 0.75 }),
+            core_1.style({ transform: 'translate3d(0, -5px, 0)', offset: 0.9 }),
             core_1.style({ transform: 'translate3d(0, 0, 0)', offset: 1 })
         ]))
     ]),
-    core_1.transition('inUp => void', [
-        core_1.animate(config_1.duration, core_1.keyframes([
-            core_1.style({ transform: 'translate3d(0, 10px, 0)', offset: 0.2 }),
-            core_1.style({ opacity: 1, transform: 'translate3d(0, -20px, 0)', offset: 0.5 }),
-            core_1.style({ opacity: 0, transform: 'translate3d(0, 1000px, 0)', offset: 1 })
+    core_1.transition('bounceInUp => void', [
+        core_1.animate(timing, core_1.keyframes([
+            core_1.style({ transform: 'translate3d(0, -10px, 0)', offset: 0.2 }),
+            core_1.style({ opacity: 1, transform: 'translate3d(0, 20px, 0)', offset: 0.5 }),
+            core_1.style({ opacity: 0, transform: 'translate3d(0, -1000px, 0)', offset: 1 })
         ]))
-    ]),
-]);
+    ])
+]; };
 //# sourceMappingURL=bounce.js.map

dist/animations/fade.d.ts

@@ -1,2 +0,2 @@
-import { AnimationEntryMetadata } from '@angular/core';
-export declare const fade: AnimationEntryMetadata;
+import { AnimationStateTransitionMetadata } from '@angular/core';
+export declare const fade: (timing: string) => AnimationStateTransitionMetadata[];

dist/animations/fade.js

 "use strict";
 var core_1 = require('@angular/core');
-var config_1 = require('../config');
-exports.fade = core_1.trigger('fade', [
-    core_1.transition('void => in', [
-        core_1.animate(config_1.duration, core_1.keyframes([
+exports.fade = function (timing) { return [
+    core_1.transition('* => fadeIn', [
+        core_1.animate(timing, core_1.keyframes([
             core_1.style({ opacity: 0, offset: 0 }),
@@ -11,21 +10,21 @@ core_1.style({ opacity: 1, offset: 1 })
     ]),
-    core_1.transition('in => void', [
-        core_1.animate(config_1.duration, core_1.style({
+    core_1.transition('fadeIn => void', [
+        core_1.animate(timing, core_1.style({
             opacity: 0
         }))
     ]),
-    core_1.transition('void => inDown', [
-        core_1.animate(config_1.duration, core_1.keyframes([
-            core_1.style({ opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 0 }),
+    core_1.transition('* => fadeInDown', [
+        core_1.animate(timing, core_1.keyframes([
+            core_1.style({ opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 0 }),
             core_1.style({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1 })
         ]))
     ]),
-    core_1.transition('inDown => void', [
-        core_1.animate(config_1.duration, core_1.style({
+    core_1.transition('fadeInDown => void', [
+        core_1.animate(timing, core_1.style({
             opacity: 0,
-            transform: 'translate3d(0, -100%, 0)'
+            transform: 'translate3d(0, 100%, 0)'
         }))
     ]),
-    core_1.transition('void => inLeft', [
-        core_1.animate(config_1.duration, core_1.keyframes([
+    core_1.transition('* => fadeInLeft', [
+        core_1.animate(timing, core_1.keyframes([
             core_1.style({ opacity: 0, transform: 'translate3d(-100%, 0, 0)', offset: 0 }),
@@ -35,4 +34,4 @@ core_1.style({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1 })
     ]),
-    core_1.transition('inLeft => void', [
-        core_1.animate(config_1.duration, core_1.style({
+    core_1.transition('fadeInLeft => void', [
+        core_1.animate(timing, core_1.style({
             opacity: 0,
@@ -42,4 +41,4 @@ transform: 'translate3d(100%, 0, 0)'
     ]),
-    core_1.transition('void => inRight', [
-        core_1.animate(config_1.duration, core_1.keyframes([
+    core_1.transition('* => fadeInRight', [
+        core_1.animate(timing, core_1.keyframes([
             core_1.style({ opacity: 0, transform: 'translate3d(100%, 0, 0)', offset: 0 }),
@@ -49,4 +48,4 @@ core_1.style({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1 })
     ]),
-    core_1.transition('inRight => void', [
-        core_1.animate(config_1.duration, core_1.style({
+    core_1.transition('fadeInRight => void', [
+        core_1.animate(timing, core_1.style({
             opacity: 0,
@@ -56,15 +55,15 @@ transform: 'translate3d(-100%, 0, 0)'
     ]),
-    core_1.transition('void => inUp', [
-        core_1.animate(config_1.duration, core_1.keyframes([
-            core_1.style({ opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 0 }),
+    core_1.transition('* => fadeInUp', [
+        core_1.animate(timing, core_1.keyframes([
+            core_1.style({ opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 0 }),
             core_1.style({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1 })
         ]))
     ]),
-    core_1.transition('inUp => void', [
-        core_1.animate(config_1.duration, core_1.style({
+    core_1.transition('fadeInUp => void', [
+        core_1.animate(timing, core_1.style({
             opacity: 0,
-            transform: 'translate3d(0, 100%, 0)'
+            transform: 'translate3d(0, -100%, 0)'
         }))
-    ]),
-]);
+    ])
+]; };
 //# sourceMappingURL=fade.js.map

dist/index.d.ts

@@ -1,2 +0,2 @@
-export * from './animations/bounce';
-export * from './animations/fade';
+import { AnimationEntryMetadata } from '@angular/core';
+export declare const animateFactory: (duration?: string | number, delay?: string | number, easing?: string) => AnimationEntryMetadata;

dist/index.js

 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-__export(require('./animations/bounce'));
-__export(require('./animations/fade'));
+var core_1 = require('@angular/core');
+var fade_1 = require('./animations/fade');
+var bounce_1 = require('./animations/bounce');
+var rotate_1 = require('./animations/rotate');
+exports.animateFactory = function (duration, delay, easing) {
+    if (duration === void 0) { duration = 500; }
+    if (delay === void 0) { delay = 0; }
+    if (easing === void 0) { easing = 'linear'; }
+    var params = [
+        typeof (duration) === 'number' ? duration + "ms" : duration,
+        typeof (delay) === 'number' ? delay + "ms" : delay,
+        easing
+    ].join(' ');
+    return core_1.trigger('animate', fade_1.fade(params).concat(bounce_1.bounce(params), rotate_1.rotate(params)));
+};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "ng2-animate",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "angular2 animations",
@@ -14,3 +14,3 @@ "main": "dist/index.js",
     "build": "npm run tsc",
-    "prepublish": "npm run build"
+    "prepublish": "npm run example && npm run build"
   },
@@ -17,0 +17,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36028

increased by49.98%

Lines of code

234

increased by43.56%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes