feat(tab-scroller): Mixin for scroll transition

Fixes material-components#5123
cletusw · Oct 8, 2019 · 4716772 · 4716772
1 parent d42a427
commit 4716772
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/packages/mdc-tab-scroller/_mixins.scss b/packages/mdc-tab-scroller/_mixins.scss
@@ -26,10 +26,28 @@
 @import "@material/feature-targeting/mixins";
 @import "./variables";
 
+@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);
 
+  @include mdc-tab-scroller-transition($mdc-tab-scroller-transition-duration, $query)
+
   // postcss-bem-linter: define tab-scroller
   .mdc-tab-scroller {
     @include mdc-feature-targets($feat-structure) {
@@ -100,12 +118,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