Merge branch 'develop'

dist/ngPokie.css

@@ -11,7 +11,6 @@
 
 .ng-pokie-digit-column {
   position: absolute;
-  transition: all 3s ease-out;
   margin: 0;
   padding: 0;
   list-style-type: none; }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-pokie",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Slot machine style number spinner component for AngularJS. Pass it a number and watch it go.",
   "main": "dist/ngPokie.js",
   "scripts": {

src/ng-pokie.component.js

@@ -5,7 +5,8 @@ export const NgPokieComponent = {
     template,
     bindings: {
         value: '<',
-        minColumns: '<'
+        minColumns: '<',
+        spinTime: '<'
     },
     controller: class NgPokieComponent {
         constructor($scope, $interval) {
@@ -75,6 +76,24 @@ export const NgPokieComponent = {
             }, this.spinDelay);
         }
 
+        initSpinTime() {
+            if (this.spinTime && !this.minColumns) {
+                this.spinDelay = 0;
+                this.spinAnimationTime = this.spinTime;
+            } else if (this.spinTime) {
+                this.spinDelay = this.spinTime / 2 / this.minColumns;
+                this.spinAnimationTime = this.spinTime / 2;
+            } else {
+                this.spinAnimationTime = this.spinTime;
+            }
+        }
+
+        setColumnStyles() {
+            this.columnStyles = {
+                'transition': `all ${this.spinAnimationTime}ms ease-out`
+            };
+        }
+
         $onInit() {
             this.$scope.$watch(() => this.value, (newVal, oldVal) => {
                 if (newVal !== oldVal) {
@@ -83,6 +102,10 @@ export const NgPokieComponent = {
             });
 
             this.initDigits();
+            this.initSpinTime();
+            this.setColumnStyles();
+
+            console.log('zzz', this.columnStyles, this.spinTime, this.spinAnimationTime);
         }
     }
 };

src/ng-pokie.html

@@ -1,6 +1,6 @@
 <div class="ng-pokie-container">
     <div class="ng-pokie-digit-column-container" ng-repeat="column in $ctrl.digitColumns track by $index">
-        <ul class="ng-pokie-digit-column" ng-class="{'is-spun': column.isSpun}">
+        <ul class="ng-pokie-digit-column" ng-class="{'is-spun': column.isSpun}" ng-style="$ctrl.columnStyles">
             <li ng-repeat="digit in column.digits track by $index" ng-bind="digit" class="ng-pokie-digit"></li>
         </ul>
     </div>

src/ng-pokie.scss

@@ -13,7 +13,6 @@
 
 .ng-pokie-digit-column {
     position: absolute;
-    transition: all 3s ease-out;
     margin: 0;
     padding: 0;
     list-style-type: none;