Drop transitionend dependency

package.json

@@ -44,7 +44,6 @@
     "autosize": "^3.0.17",
     "element.scrollintoviewifneeded-polyfill": "^1.0.1",
     "scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim",
-    "transitionEnd": "^1.0.2",
     "vue": "^2.0.2"
   },
   "devDependencies": {

src/components/mdMenu/mdMenu.scss

@@ -30,8 +30,8 @@ $menu-base-width: 56px;
   opacity: 0;
   transform: scale3D(.85, .85, 1);
   transition: width $swift-ease-out-duration $swift-ease-out-timing-function,
-              opacity .2s $swift-ease-in-timing-function,
-              transform .15s .1s $swift-ease-in-timing-function;
+              opacity .25s $swift-ease-in-timing-function,
+              transform .1s .12s $swift-ease-in-timing-function;
   color: rgba(#212121, .87);
 
   &.md-active {
@@ -40,8 +40,8 @@ $menu-base-width: 56px;
     transform: scale3D(1, 1, 1);
     transform-origin: center;
     transition: width $swift-ease-out-duration $swift-ease-out-timing-function,
-                opacity .2s $swift-ease-out-timing-function,
-                transform .15s .1s $swift-ease-out-timing-function;
+                opacity .3s $swift-ease-out-timing-function,
+                transform .2s .073s $swift-ease-out-timing-function;
 
     > * {
       opacity: 1;

src/components/mdMenu/mdMenu.vue

@@ -7,9 +7,7 @@
 <style lang="scss" src="./mdMenu.scss"></style>
 
 <script>
-  import 'transitionEnd';
-
-  let transitionEnd = window.transitionEnd;
+  import transitionEndEventName from '../../core/utils/transitionEndEventName';
 
   export default {
     props: {
@@ -24,7 +22,7 @@
     },
     data() {
       return {
-        margin: 16,
+        margin: 4,
         active: false
       };
     },
@@ -55,7 +53,7 @@
         this.menuContent.classList.add('md-size-' + this.mdSize);
       },
       closeOnOffClick(event) {
-        if (!this.$el.contains(event.target)) {
+        if (!this.$el.contains(event.target) && !this.menuContent.contains(event.target)) {
           this.close();
         }
       },
@@ -197,17 +195,24 @@
 
         getComputedStyle(this.menuContent).top;
         this.menuContent.classList.add('md-active');
+        this.menuContent.focus();
         this.active = true;
       },
       close() {
-        transitionEnd(this.menuContent).bind(() => {
-          document.body.removeChild(this.menuContent);
-          document.removeEventListener('click', this.closeOnOffClick);
-          window.removeEventListener('resize', this.recalculateOnResize);
+        let close = (event) => {
+          if (this.menuContent && event.target === this.menuContent && event.propertyName === 'transform') {
+            this.menuContent.removeEventListener(transitionEndEventName, close);
+            this.menuTrigger.focus();
 
-          this.active = false;
-          transitionEnd(this.menuContent).unbind();
-        });
+            document.body.removeChild(this.menuContent);
+            document.removeEventListener('click', this.closeOnOffClick);
+            window.removeEventListener('resize', this.recalculateOnResize);
+
+            this.active = false;
+          }
+        };
+
+        this.menuContent.addEventListener(transitionEndEventName, close);
 
         this.menuContent.classList.remove('md-active');
       },

src/core/utils/transitionEndEventName.js

@@ -0,0 +1,17 @@
+function transitionEndEventName() {
+  const el = document.createElement('span');
+  const transitions = {
+    transition: 'transitionend',
+    OTransition: 'oTransitionEnd',
+    MozTransition: 'transitionend',
+    WebkitTransition: 'webkitTransitionEnd'
+  };
+
+  for (let transition in transitions) {
+    if (el.style[transition] !== undefined) {
+      return transitions[transition];
+    }
+  }
+}
+
+export default transitionEndEventName();