Merge pull request #62 from offirgolan/shrink-animation

[FEATURE] Slide Shrink Animation

README.md

@@ -47,6 +47,7 @@ If it is a bug [please open an issue on GitHub](http://github.com/offirgolan/emb
 - scale-down
 - scale-rotate
 - slide-reverse
+- slide-shrink
 
 ### Menu Item Animations
 

addon/animations/slide-shrink.js

@@ -0,0 +1,12 @@
+import Animation from 'ember-burger-menu/animations/base';
+
+export default Animation.extend({
+  animation: 'slide-shrink',
+
+  outlet(open, width, right) {
+    return {
+      marginLeft: (open && !right) ? `${width}px` : 0,
+      marginRight: (open && right) ? `${width}px` : 0
+    };
+  }
+});

addon/styles/addon.scss

@@ -10,6 +10,7 @@
 @import './animations/scale-rotate';
 @import './animations/scale-up';
 @import './animations/slide';
+@import './animations/slide-shrink';
 @import './animations/slide-reverse';
 
 @import './animations/menu-item/push';
@@ -44,8 +45,8 @@
 		z-index: 99;
 		height: 100%;
 		perspective: 1000px;
-		-webkit-transition: -webkit-transform $t-duration;
-		transition: transform $t-duration;
+		-webkit-transition: -webkit-transform $t-duration, margin $t-duration;
+		transition: transform $t-duration, margin $t-duration;
 
 		.bm-content {
 			position: relative;

addon/styles/animations/slide-shrink.scss

@@ -0,0 +1,27 @@
+@import '../variables';
+
+.ember-burger-menu.bm--slide-shrink {
+	.bm-menu {
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+	}
+
+	.bm-outlet {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	&.right {
+		.bm-menu {
+			-webkit-transform: translate3d(100%, 0, 0);
+			transform: translate3d(100%, 0, 0);
+		}
+	}
+
+	&.is-open {
+		.bm-menu {
+			-webkit-transform: translate3d(0, 0, 0);
+			transform: translate3d(0, 0, 0);
+		}
+	}
+}

addon/utils/css-stringify.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 const {
   isEmpty,
-  String: { htmlSafe }
+  String: { htmlSafe, dasherize }
 } = Ember;
 
 const PREFIXES = ['webkit'];
@@ -32,6 +32,7 @@ export default function cssStringify(hash = {}) {
 }
 
 function buildProp(key, value) {
+  key = dasherize(key);
   let css = [`${key}: ${value}`];
 
   if (PREFIXED_PROPS.indexOf(key) > -1) {

tests/dummy/app/controllers/index.js

@@ -41,7 +41,8 @@ export default Ember.Controller.extend({
     'scale-up',
     'scale-down',
     'scale-rotate',
-    'slide-reverse'
+    'slide-reverse',
+    'slide-shrink'
   ],
 
   itemAnimations: [

tests/unit/animations-test.js

@@ -3,6 +3,7 @@ import { module, test } from 'qunit';
 
 const ANIMATIONS = [
   'slide',
+  'slide-shrink',
   'reveal',
   'push',
   'fall-down',

yarn.lock

@@ -2194,9 +2194,9 @@ ember-cli-changelog@^0.3.4:
     rsvp "^3.1.0"
     valid-url "^1.0.9"
 
-[email protected].9:
-  version "0.3.9"
-  resolved "https://registry.yarnpkg.com/ember-cli-code-coverage/-/ember-cli-code-coverage-0.3.9.tgz#bdd971fd3de451c2ec3644fd3e0be6ed8541a961"
+[email protected].12:
+  version "0.3.12"
+  resolved "https://registry.yarnpkg.com/ember-cli-code-coverage/-/ember-cli-code-coverage-0.3.12.tgz#6139ad643e882c8dd738f6bc0b480fcfd3a4b351"
   dependencies:
     babel-core "^5.8.38"
     body-parser "^1.15.0"
@@ -2210,6 +2210,8 @@ [email protected]:
     extend "^3.0.0"
     fs-extra "^0.26.7"
     istanbul "^0.4.3"
+    node-dir "^0.1.16"
+    rsvp "^3.2.1"
     source-map "0.5.6"
     string.prototype.startswith "^0.2.0"
 
@@ -4818,6 +4820,12 @@ [email protected]:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+node-dir@^0.1.16:
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.16.tgz#d2ef583aa50b90d93db8cdd26fcea58353957fe4"
+  dependencies:
+    minimatch "^3.0.2"
+
 node-fetch@^1.3.3:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"