Address feedback

Author: devversion

src/lib/core/ripple/ripple-renderer.ts

@@ -171,14 +171,18 @@ export class RippleRenderer {
       this._mostRecentTransientRipple = rippleRef;
     }
 
-    this._ngZone.runOutsideAngular(() => {
-      ripple.addEventListener('transitionend', () => this._onRippleTransitionEnd(rippleRef));
-    });
+    // Do not register the transition event listener if the fade-in and fade-out duration
+    // are set to zero because the event won't be fired at all.
+    if (duration || animationConfig.exitDuration) {
+      this._ngZone.runOutsideAngular(() => {
+        ripple.addEventListener('transitionend', () => this._finishRippleTransition(rippleRef));
+      });
+    }
 
     // In case there is no fade-in transition duration, we need to manually call the
     // transition end listener because `transitionend` doesn't fire if there is no transition.
     if (!duration) {
-      this._onRippleTransitionEnd(rippleRef);
+      this._finishRippleTransition(rippleRef);
     }
 
     return rippleRef;
@@ -214,7 +218,7 @@ export class RippleRenderer {
     // In case there is no fade-out transition duration, we need to manually call the
     // transition end listener because `transitionend` doesn't fire if there is no transition.
     if (!animationConfig.exitDuration) {
-      this._onRippleTransitionEnd(rippleRef);
+      this._finishRippleTransition(rippleRef);
     }
   }
 
@@ -240,28 +244,39 @@ export class RippleRenderer {
     this._triggerElement = element;
   }
 
-  /** Transition end event listener that fires after ripples fade in or fade out. */
-  private _onRippleTransitionEnd(rippleRef: RippleRef) {
-    const {config, element} = rippleRef;
-
+  /** Method that will be called if the fade-in or fade-in transition completed. */
+  private _finishRippleTransition(rippleRef: RippleRef) {
     if (rippleRef.state === RippleState.FADING_IN) {
-      const isMostRecentTransientRipple = rippleRef === this._mostRecentTransientRipple;
+      this._startFadeOutTransition(rippleRef);
+    } else if (rippleRef.state === RippleState.FADING_OUT) {
+      this._destroyRipple(rippleRef);
+    }
+  }
 
-      rippleRef.state = RippleState.VISIBLE;
+  /**
+   * Starts the fade-out transition of the given ripple if it's not persistent and the pointer
+   * is not held down anymore.
+   */
+  private _startFadeOutTransition(rippleRef: RippleRef) {
+    const isMostRecentTransientRipple = rippleRef === this._mostRecentTransientRipple;
 
-      // When the timer runs out while the user has kept their pointer down, we want to
-      // keep only the persistent ripples and the latest transient ripple. We do this,
-      // because we don't want stacked transient ripples to appear after their enter
-      // animation has finished.
-      if (!config.persistent && (!isMostRecentTransientRipple || !this._isPointerDown)) {
-        rippleRef.fadeOut();
-      }
-    } else if (rippleRef.state === RippleState.FADING_OUT) {
-      rippleRef.state = RippleState.HIDDEN;
-      element.parentNode!.removeChild(element);
+    rippleRef.state = RippleState.VISIBLE;
+
+    // When the timer runs out while the user has kept their pointer down, we want to
+    // keep only the persistent ripples and the latest transient ripple. We do this,
+    // because we don't want stacked transient ripples to appear after their enter
+    // animation has finished.
+    if (!rippleRef.config.persistent && (!isMostRecentTransientRipple || !this._isPointerDown)) {
+      rippleRef.fadeOut();
     }
   }
 
+  /** Destroys the given ripple by removing it from the DOM and updating its state. */
+  private _destroyRipple(rippleRef: RippleRef) {
+    rippleRef.state = RippleState.HIDDEN;
+    rippleRef.element.parentNode!.removeChild(rippleRef.element);
+  }
+
   /** Function being called whenever the trigger is being pressed using mouse. */
   private onMousedown = (event: MouseEvent) => {
     const isSyntheticEvent = this._lastTouchStartEvent &&