feat(tab-scroller): Mixin for scroll transition (#5154)

material-components · Oct 11, 2019 · efda83d · efda83d
1 parent fc0e474
commit efda83d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/packages/mdc-tab-scroller/README.md b/packages/mdc-tab-scroller/README.md
@@ -71,6 +71,12 @@ CSS Class | Description
 
 > _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).
 
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.
+
 ## `MDCTabScroller` Methods
 
 Method Signature | Description

diff --git a/packages/mdc-tab-scroller/_mixins.scss b/packages/mdc-tab-scroller/_mixins.scss
@@ -26,12 +26,36 @@
 @import "@material/feature-targeting/mixins";
 @import "./variables";
 
+///
+/// Sets the CSS transition for the tab scrolling animation.
+///
+/// @param {Number | String} $duration-ms - Duration (in ms) of the animation.
+/// @param {String} $timing-function - Optionally overrides the default animation timing function.
+///
+@mixin mdc-tab-scroller-transition(
+  $duration-ms,
+  $timing-function: $mdc-animation-standard-curve-timing-function,
+  $query: mdc-feature-all()
+) {
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  &.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content {
+    @include mdc-feature-targets($feat-animation) {
+      transition: $duration-ms transform $timing-function;
+    }
+  }
+}
+
 @mixin mdc-tab-scroller-core-styles($query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
   $feat-animation: mdc-feature-create-target($query, animation);
 
   // postcss-bem-linter: define tab-scroller
   .mdc-tab-scroller {
+    @include mdc-tab-scroller-transition(
+      $duration-ms: $mdc-tab-scroller-transition-duration,
+      $query: $query);
+
     @include mdc-feature-targets($feat-structure) {
       overflow-y: hidden;
     }
@@ -100,12 +124,6 @@
         -webkit-overflow-scrolling: auto;
       }
     }
-
-    .mdc-tab-scroller__scroll-content {
-      @include mdc-feature-targets($feat-animation) {
-        transition: $mdc-tab-scroller-transition-duration transform $mdc-animation-standard-curve-timing-function;
-      }
-    }
   }
 
   // postcss-bem-linter: end