cloak.animate - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "cloak.animate",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "The Cloak.js module for animating views and controllers (using Velocity)",
@@ -26,4 +26,5 @@ "main": "src/index.js",
   "dependencies": {
-    "cloak.core": "0.0.x"
+    "cloak.core": "0.0.x",
+    "velocity-animate": "^1.2.1"
   }
 }

readme.md

@@ -47,2 +47,82 @@
 $ npm install --save cloak.core cloak.animate
+```
+
+###### ViewAnimation
+
+```javascript
+var View           = require('cloak.view');
+var ViewAnimation  = require('cloak.animate').ViewAnimation;
+
+//
+// The ViewAnimation mixin adds the `animate` method, as well as some shortcut
+// methods for common animations like `fadeIn`. These all effect the View::elem
+// property.
+//
+var FancyView = module.exports = View.extend(ViewAnimation, {
+
+    //...
+
+    fadeInOut: function() {
+        return this.fadeOut()
+            .then(this.animate.wait(500))
+            .then(this.fadeIn.bind(this));
+    },
+
+    customAnimation: function() {
+        return this.animate(
+            { opacity: 0.5, background: '#fff' },
+            { duration: 1500 }
+        );
+    }
+
+});
+```
+
+###### ControllerAnimation
+
+```javascript
+var Controller           = require('cloak.controller');
+var ControllerAnimation  = require('cloak.animate').ControllerAnimation;
+
+//
+// Like above, the ControllerAnimation mixin adds all of the same methods,
+// except that the controller version target the Controller::scope property
+// as the element to animate.
+//
+var FancyController = module.exports = Controller.extend(ControllerAnimation, {
+
+    //...
+
+    fadeInOut: function() {
+        return this.fadeOut()
+            .then(this.animate.wait(500))
+            .then(this.fadeIn.bind(this));
+    },
+
+    customAnimation: function() {
+        return this.animate(
+            { opacity: 0.5, background: '#fff' },
+            { duration: 1500 }
+        );
+    }
+
+});
+```
+
+###### Core Animate Method
+
+```javascript
+var animate = require('cloak.animate').animate;
+
+//
+// You can also use the base `animate` method to animate any element in the
+// same basic fashion
+//
+var para = document.querySelector('p');
+
+animate(para, { color: '#a00' }, { duration: 200 })
+    .then(animate.wait(500))
+    .then(function() {
+        return animate(para, { color: '#000' }, { duration: 200 });
+    });
 ```

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7753

increased by118.33%

Number of package files

5

increased by25%

Lines of code

85

increased byInfinity%

Number of lines in readme file

127

increased by170.21%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedvelocity-animate@^1.2.1

• + Addedvelocity-animate@1.5.2(transitive)