feat(fab): Implement enter/exit transitions (#1241)

material-components · Sep 7, 2017 · 6d6ba4a · 6d6ba4a
1 parent 148f510
commit 6d6ba4a
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 12 deletions.
diff --git a/demos/fab.html b/demos/fab.html
@@ -37,27 +37,57 @@
         padding-bottom: 24px;
       }
 
-      .mdc-fab {
-        margin: 16px;
-      }
-
       figcaption > div {
         margin: 8px;
       }
 
-      #demo-absolute-fab {
-        position: fixed;
+      .mdc-fab {
+        margin: 16px;
+      }
+
+      .demo-absolute-fab,
+      .demo-fixed-fab {
+        position: absolute;
         bottom: 1rem;
         right: 1rem;
         z-index: 1;
       }
 
+      .demo-fixed-fab {
+        position: fixed;
+      }
+
       @media(min-width: 1024px) {
-        #demo-absolute-fab {
+        .demo-fixed-fab {
           bottom: 1.5rem;
           right: 1.5rem;
         }
       }
+
+      .fab-motion-container {
+        border: 1px solid #ccc;
+        margin: 1rem;
+        padding: 0 1rem;
+        overflow: hidden;
+        position: relative;
+        height: 10rem;
+        width: 20rem;
+      }
+
+      .fab-motion-container__view {
+        background-color: #fff;
+        box-sizing: border-box;
+        position: absolute;
+        transition: transform 375ms cubic-bezier(0.0, 0.0, 0.2, 1);
+        height: 100%;
+        width: 100%;
+        will-change: transform;
+      }
+
+      .fab-motion-container__view--exited {
+        transition-timing-function: cubic-bezier(.4, 0, 1, 1);
+        transform: translateY(100%);
+      }
     </style>
   </head>
   <body>
@@ -81,7 +111,7 @@
         </button>
       </section>
 
-      <button id="demo-absolute-fab" class="mdc-fab">
+      <button class="mdc-fab demo-fixed-fab">
         <span class="mdc-fab__icon">
           <svg width="24" height="24" viewBox="0 0 24 24">
             <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
@@ -169,6 +199,23 @@
           </figure>
         </div>
       </section>
+      <section>
+        <legend>Example of Enter and Exit Motions</legend>
+        <div class="fab-motion-container">
+          <div class="fab-motion-container__view">
+            <p>View one (with FAB)</p>
+          </div>
+          <div class="fab-motion-container__view fab-motion-container__view--exited">
+            <p>View two (without FAB)</p>
+            <p><button type="button" disabled id="enter-exit-back">Go back</button></p>
+          </div>
+          <button id="enter-exit-add" class="mdc-fab demo-absolute-fab material-icons" aria-label="Add">
+            <span class="mdc-fab__icon">
+              add
+            </span>
+          </button>
+        </div>
+      </section>
     </main>
     <script src="/assets/material-components-web.js"></script>
     <script>
@@ -190,6 +237,37 @@
             mdc.ripple.MDCRipple.attachTo(fab);
           }
         }
+
+        var addFab = document.getElementById('enter-exit-add');
+        var VIEW_CLASS = 'fab-motion-container__view';
+        var enterExitDemoViews = document.querySelectorAll('.' + VIEW_CLASS);
+        var backButton = document.getElementById('enter-exit-back');
+        var activeView = 0;
+        addFab.addEventListener('click', function() {
+          activeView = 1;
+          enterExitDemoViews[1].classList.remove(VIEW_CLASS + '--exited');
+          addFab.classList.add('mdc-fab--exited');
+          backButton.disabled = false;
+          // Remove tab stop to ensure exited FAB does not receive keyboard focus
+          addFab.tabIndex = -1;
+        });
+
+        backButton.addEventListener('click', function() {
+          activeView = 0;
+          enterExitDemoViews[1].classList.add(VIEW_CLASS + '--exited');
+          addFab.classList.remove('mdc-fab--exited');
+          // Restore tab stop to allow FAB to receive keyboard focus
+          addFab.tabIndex = 0;
+          backButton.disabled = true;
+        });
+
+        enterExitDemoViews[1].addEventListener('transitionend', function() {
+          if (activeView === 0) {
+            addFab.focus();
+          } else {
+            backButton.focus();
+          }
+        });
       })();
     </script>
   </body>

diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md
@@ -131,6 +131,7 @@ in all browsers. See [this Stackoverflow post](http://stackoverflow.com/posts/35
 
 CSS Class | Description
 --- | ---
+`mdc-fab--exited` | Animates the FAB out of view.<br>When this class is removed, the FAB will return to view.
 `mdc-fab--mini` | Makes the fab smaller (40 x 40 pixels)
 
 > **NOTE**: No disabled styles are defined for FABs, as they are intended to denote a promoted action, and should not be
@@ -144,14 +145,14 @@ the theme. This mixin will override the color of the FAB's container, but mainta
 
 #### `mdc-fab-accessible($container-color)`
 
-Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet 
+Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet
 accessibility standards.
 
 ---
 
-The following mixins are intended for advanced users. These mixins will override the color of the container, 
+The following mixins are intended for advanced users. These mixins will override the color of the container,
 ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of
-them, e.g. if you only need to override the ripple color. It is up to you to pick container, ink, and ripple 
+them, e.g. if you only need to override the ripple color. It is up to you to pick container, ink, and ripple
 colors that work together, and meet accessibility standards.
 
 #### `mdc-fab-container-color($color)`

diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss
@@ -15,6 +15,7 @@
 @import "@material/animation/functions";
 @import "@material/animation/variables";
 @import "@material/elevation/mixins";
+@import "@material/elevation/variables";
 @import "@material/ripple/mixins";
 @import "@material/theme/functions";
 @import "@material/theme/mixins";
@@ -49,6 +50,9 @@
   @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
 }
 
+$mdc-fab-icon-enter-delay_: 90ms;
+$mdc-fab-icon-enter-duration_: 180ms;
+
 @mixin mdc-fab-base_ {
   @include mdc-ripple-base;
 
@@ -59,7 +63,10 @@
   width: 56px;
   height: 56px;
   padding: 0;
-  transition: box-shadow 280ms $mdc-animation-standard-curve-timing-function;
+  transition:
+    box-shadow $mdc-elevation-transition-duration $mdc-elevation-transition-timing-function,
+    opacity 15ms linear 30ms,
+    mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_ + $mdc-fab-icon-enter-delay_);
   border: none;
   border-radius: 50%;
   fill: currentColor;
@@ -114,4 +121,19 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  will-change: transform;
+  transition: mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_, $mdc-fab-icon-enter-delay_);
+}
+
+@mixin mdc-fab--exited_ {
+  transform: scale(0);
+  transition:
+    opacity 15ms linear 150ms,
+    mdc-animation-exit-permanent(transform, 180ms);
+  opacity: 0;
+
+  .mdc-fab__icon {
+    transform: scale(0);
+    transition: mdc-animation-exit-permanent(transform, 135ms);
+  }
 }
diff --git a/packages/mdc-fab/mdc-fab.scss b/packages/mdc-fab/mdc-fab.scss
@@ -37,4 +37,8 @@
   @include mdc-fab__icon_;
 }
 
+.mdc-fab--exited {
+  @include mdc-fab--exited_;
+}
+
 // postcss-bem-linter: end