fix(animations): prevent animations when in a noopanimations module

Author: josephperrott

package-lock.json

@@ -26,12 +26,12 @@
     "node": ">= 5.4.1"
   },
   "dependencies": {
-    "@angular/animations": "6.0.0-rc.4",
-    "@angular/common": "6.0.0-rc.4",
-    "@angular/compiler": "6.0.0-rc.4",
-    "@angular/core": "6.0.0-rc.4",
-    "@angular/forms": "6.0.0-rc.4",
-    "@angular/platform-browser": "6.0.0-rc.4",
+    "@angular/animations": "6.0.0-rc.5",
+    "@angular/common": "6.0.0-rc.5",
+    "@angular/compiler": "6.0.0-rc.5",
+    "@angular/core": "6.0.0-rc.5",
+    "@angular/forms": "6.0.0-rc.5",
+    "@angular/platform-browser": "6.0.0-rc.5",
     "core-js": "^2.4.1",
     "rxjs": "6.0.0-ucandoit-rc.6",
     "systemjs": "0.19.43",
@@ -42,13 +42,13 @@
   "devDependencies": {
     "@angular-devkit/core": "^0.5.6",
     "@angular-devkit/schematics": "^0.5.6",
-    "@angular/bazel": "6.0.0-rc.4",
-    "@angular/compiler-cli": "6.0.0-rc.4",
-    "@angular/http": "6.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "6.0.0-rc.4",
-    "@angular/platform-server": "6.0.0-rc.4",
-    "@angular/router": "6.0.0-rc.4",
-    "@angular/upgrade": "6.0.0-rc.4",
+    "@angular/bazel": "6.0.0-rc.5",
+    "@angular/compiler-cli": "6.0.0-rc.5",
+    "@angular/http": "6.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "6.0.0-rc.5",
+    "@angular/platform-server": "6.0.0-rc.5",
+    "@angular/router": "6.0.0-rc.5",
+    "@angular/upgrade": "6.0.0-rc.5",
     "@bazel/ibazel": "0.3.1",
     "@google-cloud/storage": "^1.1.1",
     "@schematics/angular": "^0.5.6",

package.json

@@ -10,7 +10,7 @@ import {ApplicationRef, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {HttpClientModule} from '@angular/common/http';
 import {RouterModule} from '@angular/router';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ALL_ROUTES} from './demo-app/routes';
 import {EntryApp} from './demo-app/demo-app';
 import {DemoModule} from './demo-app/demo-module';
@@ -20,7 +20,7 @@ import {AccessibilityDemoModule} from './a11y/a11y-module';
 @NgModule({
   imports: [
     BrowserModule,
-    BrowserAnimationsModule,
+    NoopAnimationsModule,
     HttpClientModule,
     DemoModule,
     AccessibilityDemoModule,

src/demo-app/demo-app-module.ts

@@ -0,0 +1,9 @@
+// If the mat-animation-noop class is present on the components root element,
+// prevent non css animations from running.
+@mixin noop-animation() {
+  @at-root .mat-animation-noop#{&} {
+    transition-property: none;
+    transition: none;
+    animation: none;
+  }
+}

src/lib/core/style/_noop-animation.scss

@@ -1,12 +1,14 @@
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
+@import '../core/style/noop-animation';
 
 $mat-progress-bar-height: 5px !default;
 $mat-progress-bar-full-animation-duration: 2000ms !default;
 $mat-progress-bar-piece-animation-duration: 250ms !default;
 
 
 .mat-progress-bar {
+  @include noop-animation();
   display: block;
   // Height is provided for mat-progress-bar to act as a default.
   height: $mat-progress-bar-height;
@@ -33,6 +35,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   // The progress bar buffer is the bar indicator showing the buffer value and is only visible
   // beyond the current value of the primary progress bar.
   .mat-progress-bar-buffer {
+    @include noop-animation();
     transform-origin: top left;
     transition: transform $mat-progress-bar-piece-animation-duration ease;
   }
@@ -45,13 +48,15 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
   // The progress bar fill fills the progress bar with the indicator color.
   .mat-progress-bar-fill {
+    @include noop-animation();
     animation: none;
     transform-origin: top left;
     transition: transform $mat-progress-bar-piece-animation-duration ease;
   }
 
   // A pseudo element is created for each progress bar bar that fills with the indicator color.
   .mat-progress-bar-fill::after {
+    @include noop-animation();
     animation: none;
     content: '';
     display: inline-block;
@@ -76,23 +81,27 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   &[mode='indeterminate'],
   &[mode='query'] {
     .mat-progress-bar-fill {
+      @include noop-animation();
       transition: none;
     }
     .mat-progress-bar-primary {
       // Avoids stacked animation tearing in Firefox >= 57.
+      @include noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-translate
           $mat-progress-bar-full-animation-duration infinite linear;
       left: -145.166611%;
     }
     .mat-progress-bar-primary.mat-progress-bar-fill::after {
       // Avoids stacked animation tearing in Firefox >= 57.
+      @include noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-scale
           $mat-progress-bar-full-animation-duration infinite linear;
     }
     .mat-progress-bar-secondary {
       // Avoids stacked animation tearing in Firefox >= 57.
+      @include noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-translate
           $mat-progress-bar-full-animation-duration infinite linear;
@@ -101,6 +110,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
     }
     .mat-progress-bar-secondary.mat-progress-bar-fill::after {
       // Avoids stacked animation tearing in Firefox >= 57.
+      @include noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-scale
           $mat-progress-bar-full-animation-duration infinite linear;
@@ -110,6 +120,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   &[mode='buffer'] {
     .mat-progress-bar-background {
       // Avoids stacked animation tearing in Firefox >= 57.
+      @include noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-background-scroll
           $mat-progress-bar-piece-animation-duration infinite linear;

src/lib/progress-bar/progress-bar.scss

@@ -9,9 +9,12 @@ import {
   Component,
   ChangeDetectionStrategy,
   ElementRef,
+  Inject,
   Input,
+  Optional,
   ViewEncapsulation
 } from '@angular/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {CanColor, mixinColor} from '@angular/material/core';
 
 // TODO(josephperrott): Benchpress tests.
@@ -42,6 +45,7 @@ let progressbarId = 0;
     '[attr.aria-valuenow]': 'value',
     '[attr.mode]': 'mode',
     'class': 'mat-progress-bar',
+    '[class.mat-animation-noop]': `_animationMode === 'NoopAnimations'`,
   },
   inputs: ['color'],
   templateUrl: 'progress-bar.html',
@@ -51,7 +55,9 @@ let progressbarId = 0;
 })
 export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor {
 
-  constructor(public _elementRef: ElementRef) {
+
+  constructor(public _elementRef: ElementRef,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode: string) {
     super(_elementRef);
   }