+
+
+ Select
+
+ One
+ Two
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+ Select
+
+ One
+ Two
+
+
+
+
+ Input
+
+
+
+
diff --git a/src/lib/core/ripple/ripple.md b/src/lib/core/ripple/ripple.md
index ecd7be5a5750..74bf5736ea2b 100644
--- a/src/lib/core/ripple/ripple.md
+++ b/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
diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts
index 22f2216b30c7..6a0f846b1492 100644
--- a/src/lib/core/ripple/ripple.ts
+++ b/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),
};