docs(ripple): add note about NoopAnimationsModule (#11909)

Author: devversion

src/demo-app/toolbar/toolbar-demo.html

@@ -28,19 +28,6 @@
       <span>Primary Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
-      <mat-form-field>
-        <mat-label>Select</mat-label>
-        <mat-select>
-          <mat-option value="1">One</mat-option>
-          <mat-option value="2">Two</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field appearance="legacy">
-        <mat-label>Input</mat-label>
-        <input matInput>
-      </mat-form-field>
-
       <button mat-raised-button>Text</button>
       <button mat-raised-button color="accent">Accent</button>
       <button mat-stroked-button>Stroked</button>
@@ -56,19 +43,6 @@
       <span>Accent Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
-      <mat-form-field>
-        <mat-label>Select</mat-label>
-        <mat-select>
-          <mat-option value="1">One</mat-option>
-          <mat-option value="2">Two</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field appearance="legacy">
-        <mat-label>Input</mat-label>
-        <input matInput>
-      </mat-form-field>
-
       <button mat-button>Text</button>
       <button mat-flat-button>Flat</button>
       <button mat-mini-fab color="">
@@ -111,4 +85,40 @@
       </mat-toolbar-row>
     </mat-toolbar>
   </p>
+
+  <h3>Toolbar with form-fields</h3>
+
+  <p>
+    <mat-toolbar>
+      <mat-form-field>
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="legacy">
+        <mat-label>Input</mat-label>
+        <input matInput>
+      </mat-form-field>
+    </mat-toolbar>
+  </p>
+
+  <p>
+    <mat-toolbar color="primary">
+      <mat-form-field>
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="legacy">
+        <mat-label>Input</mat-label>
+        <input matInput>
+      </mat-form-field>
+    </mat-toolbar>
+  </p>
 </div>

src/lib/core/ripple/ripple.md

@@ -118,6 +118,9 @@ const globalRippleConfig: RippleGlobalOptions = {
 };
 ```
 
+**Note**: Ripples will also have no animation if the `NoopAnimationsModule` is being used. This
+also means that the durations in the `animation` configuration won't be taken into account.
+
 ### Animation behavior
 
 There are two different animation behaviors for the fade-out of ripples shown in the Material

src/lib/core/ripple/ripple.ts

@@ -31,8 +31,9 @@ export interface RippleGlobalOptions {
   disabled?: boolean;
 
   /**
-   * Configuration for the animation duration of the ripples.
-   * There are two phases with different durations for the ripples.
+   * Configuration for the animation duration of the ripples. There are two phases with different
+   * durations for the ripples. The animation durations will be overwritten if the
+   * `NoopAnimationsModule` is being used.
    */
   animation?: RippleAnimationConfig;
 
@@ -96,7 +97,8 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
 
   /**
    * Configuration for the ripple animation. Allows modifying the enter and exit animation
-   * duration of the ripples.
+   * duration of the ripples. The animation durations will be overwritten if the
+   * `NoopAnimationsModule` is being used.
    */
   @Input('matRippleAnimation') animation: RippleAnimationConfig;
 
@@ -137,10 +139,14 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
               ngZone: NgZone,
               platform: Platform,
               @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
 
     this._globalOptions = globalOptions || {};
     this._rippleRenderer = new RippleRenderer(this, ngZone, _elementRef, platform);
+
+    if (animationMode === 'NoopAnimations') {
+      this._globalOptions.animation = {enterDuration: 0, exitDuration: 0};
+    }
   }
 
   ngOnInit() {
@@ -163,9 +169,7 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget {
       centered: this.centered,
       radius: this.radius,
       color: this.color,
-      animation: this._animationMode === 'NoopAnimations' ?
-          {enterDuration: 0, exitDuration: 0} :
-          {...this._globalOptions.animation, ...this.animation},
+      animation: {...this._globalOptions.animation, ...this.animation},
       terminateOnPointerUp: this._globalOptions.terminateOnPointerUp,
       speedFactor: this.speedFactor * (this._globalOptions.baseSpeedFactor || 1),
     };