feat(MdSpeedDial): create morph icon

Author: marcosmoura

docs/app/pages/Components/SpeedDial/SpeedDial.vue

@@ -1,6 +1,7 @@
 <example src="./examples/PositionDirection.vue" />
 <example src="./examples/AnimationTypes.vue" />
 <example src="./examples/EventTriggers.vue" />
+<example src="./examples/MorphingIcon.vue" />
 
 <template>
   <page-container centered :title="$t('pages.speedDial.title')">
@@ -14,6 +15,7 @@
       <code-example title="Positions and directions" :component="examples['position-direction']" />
       <code-example title="Animations types" :component="examples['animation-types']" />
       <code-example title="Event triggers" :component="examples['event-triggers']" />
+      <code-example title="Morphing Icons" :component="examples['morphing-icon']" />
 
       <api-item title="API - md-speed-dial">
         <p>This component do not have any extra option.</p>

docs/app/pages/Components/SpeedDial/examples/MorphingIcon.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="example">
+    <md-speed-dial class="md-bottom-left">
+      <md-speed-dial-target>
+        <md-icon class="md-morph-initial">add</md-icon>
+        <md-icon class="md-morph-final">edit</md-icon>
+      </md-speed-dial-target>
+
+      <md-speed-dial-content>
+        <md-button class="md-icon-button">
+          <md-icon>note</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button">
+          <md-icon>event</md-icon>
+        </md-button>
+      </md-speed-dial-content>
+    </md-speed-dial>
+
+    <md-speed-dial class="md-top-left" md-direction="bottom" md-event="click">
+      <md-speed-dial-target class="md-primary">
+        <md-icon class="md-morph-initial">add</md-icon>
+        <md-icon class="md-morph-final">close</md-icon>
+      </md-speed-dial-target>
+
+      <md-speed-dial-content>
+        <md-button class="md-icon-button">
+          <md-icon>directions</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button">
+          <md-icon>streetview</md-icon>
+        </md-button>
+      </md-speed-dial-content>
+    </md-speed-dial>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MorphingIcon'
+}
+</script>
+
+<style lang="scss" scoped>
+  .example {
+    min-height: 300px;
+  }
+</style>

src/components/MdSpeedDial/MdSpeedDial.vue

@@ -161,6 +161,16 @@ export default new MdComponent({
 
     &.md-active,
     &.md-with-hover:hover {
+      .md-morph-initial {
+        opacity: 0;
+        transform: translate3D(-50%, -50%, 0) rotate(90deg) scale(.7);
+      }
+
+      .md-morph-final {
+        opacity: 1;
+        transform: translate3D(-50%, -50%, 0) rotate(0deg) scale(1);
+      }
+
       .md-speed-dial-content .md-button {
         pointer-events: auto;
         opacity: 1;
@@ -187,5 +197,21 @@ export default new MdComponent({
                   transform 0s .3s $md-transition-default-timing;
       will-change: opacity, transform;
     }
+
+    .md-morph-initial,
+    .md-morph-final {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate3D(-50%, -50%, 0);
+      transition: .3s $md-transition-stand-timing;
+      transition-property: opacity, transform;
+      will-change: opacity, transform;
+    }
+
+    .md-morph-final {
+      opacity: 0;
+      transform: translate3D(-50%, -50%, 0) scale(.7) rotate(-90deg);
+    }
   }
 </style>