feat(tab-indicator): Remove transitionend event handling (#3337)

BREAKING CHANGE: Removes handleTransitionEnd foundation API. Removes [de]registerEventHandler adapter APIs.

Author: kfranqueiro

packages/mdc-tab-indicator/README.md

@@ -146,8 +146,6 @@ Method Signature | Description
 --- | ---
 `addClass(className: string) => void` | Adds a class to the root element.
 `removeClass(className: string) => void` | Removes a class from the root element.
-`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element.
-`deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element.
 `setContentStyleProp(property: string, value: string) => void` | Sets the style property of the content element.
 `computeContentClientRect() => ClientRect` | Returns the content element's bounding client rect.
 

packages/mdc-tab-indicator/adapter.js

@@ -28,20 +28,6 @@
  * @record
  */
 class MDCTabIndicatorAdapter {
-  /**
-   * Registers an event listener on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
-   */
-  registerEventHandler(evtType, handler) {}
-
-  /**
-   * Deregisters an event listener on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
-   */
-  deregisterEventHandler(evtType, handler) {}
-
   /**
    * Adds the given className to the root element.
    * @param {string} className The className to add

packages/mdc-tab-indicator/constants.js

@@ -19,9 +19,7 @@
 const cssClasses = {
   ACTIVE: 'mdc-tab-indicator--active',
   FADE: 'mdc-tab-indicator--fade',
-  FADING_ACTIVATE: 'mdc-tab-indicator--fading-activate',
-  FADING_DEACTIVATE: 'mdc-tab-indicator--fading-deactivate',
-  SLIDING_ACTIVATE: 'mdc-tab-indicator--sliding-activate',
+  NO_TRANSITION: 'mdc-tab-indicator--no-transition',
 };
 
 /** @enum {string} */

packages/mdc-tab-indicator/fading-foundation.js

@@ -22,30 +22,11 @@ import MDCTabIndicatorFoundation from './foundation';
  * @final
  */
 class MDCFadingTabIndicatorFoundation extends MDCTabIndicatorFoundation {
-  /** @param {...?} args */
-  constructor(...args) {
-    super(...args);
-
-    /** @private {function(?Event): undefined} */
-    this.handleTransitionEnd_ = () => this.handleTransitionEnd();
-  }
-
-  /** Handles the transitionend event */
-  handleTransitionEnd() {
-    this.adapter_.deregisterEventHandler('transitionend', this.handleTransitionEnd_);
-    this.adapter_.removeClass(MDCTabIndicatorFoundation.cssClasses.FADING_ACTIVATE);
-    this.adapter_.removeClass(MDCTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE);
-  }
-
   activate() {
-    this.adapter_.registerEventHandler('transitionend', this.handleTransitionEnd_);
-    this.adapter_.addClass(MDCTabIndicatorFoundation.cssClasses.FADING_ACTIVATE);
     this.adapter_.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
   }
 
   deactivate() {
-    this.adapter_.registerEventHandler('transitionend', this.handleTransitionEnd_);
-    this.adapter_.addClass(MDCTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE);
     this.adapter_.removeClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
   }
 }

packages/mdc-tab-indicator/foundation.js

@@ -43,8 +43,6 @@ class MDCTabIndicatorFoundation extends MDCFoundation {
    */
   static get defaultAdapter() {
     return /** @type {!MDCTabIndicatorAdapter} */ ({
-      registerEventHandler: () => {},
-      deregisterEventHandler: () => {},
       addClass: () => {},
       removeClass: () => {},
       computeContentClientRect: () => {},

packages/mdc-tab-indicator/index.js

@@ -61,8 +61,6 @@ class MDCTabIndicator extends MDCComponent {
    */
   getDefaultFoundation() {
     const adapter = /** @type {!MDCTabIndicatorAdapter} */ (Object.assign({
-      registerEventHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
-      deregisterEventHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
       computeContentClientRect: () => this.content_.getBoundingClientRect(),

packages/mdc-tab-indicator/mdc-tab-indicator.scss

@@ -53,16 +53,20 @@
   opacity: 1;
 }
 
-.mdc-tab-indicator--sliding-activate > .mdc-tab-indicator__content {
+// Slide by default
+.mdc-tab-indicator > .mdc-tab-indicator__content {
   transition: 250ms transform $mdc-animation-standard-curve-timing-function;
 }
 
-.mdc-tab-indicator--fading-activate > .mdc-tab-indicator__content,
-.mdc-tab-indicator--fading-deactivate > .mdc-tab-indicator__content {
+// --no-transition is applied in cases where styles need to be applied immediately to set up a transition
+.mdc-tab-indicator--no-transition > .mdc-tab-indicator__content {
+  transition: none;
+}
+
+.mdc-tab-indicator--fade > .mdc-tab-indicator__content {
   transition: 150ms opacity linear;
 }
 
-.mdc-tab-indicator--fading-activate > .mdc-tab-indicator__content {
+.mdc-tab-indicator--active.mdc-tab-indicator--fade > .mdc-tab-indicator__content {
   transition-delay: 100ms;
 }
-

packages/mdc-tab-indicator/sliding-foundation.js

@@ -22,27 +22,12 @@ import MDCTabIndicatorFoundation from './foundation';
  * @final
  */
 class MDCSlidingTabIndicatorFoundation extends MDCTabIndicatorFoundation {
-  /** @param {...?} args */
-  constructor(...args) {
-    super(...args);
-
-    /** @private {function(?Event): undefined} */
-    this.handleTransitionEnd_ = () => this.handleTransitionEnd();
-  }
-
-  /** Handles the transitionend event */
-  handleTransitionEnd() {
-    this.adapter_.deregisterEventHandler('transitionend', this.handleTransitionEnd_);
-    this.adapter_.removeClass(MDCTabIndicatorFoundation.cssClasses.SLIDING_ACTIVATE);
-  }
-
   /** @param {!ClientRect=} previousIndicatorClientRect */
   activate(previousIndicatorClientRect) {
-    this.adapter_.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
-
     // Early exit if no indicator is present to handle cases where an indicator
     // may be activated without a prior indicator state
     if (!previousIndicatorClientRect) {
+      this.adapter_.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
       return;
     }
 
@@ -53,26 +38,19 @@ class MDCSlidingTabIndicatorFoundation extends MDCTabIndicatorFoundation {
     const currentClientRect = this.computeContentClientRect();
     const widthDelta = previousIndicatorClientRect.width / currentClientRect.width;
     const xPosition = previousIndicatorClientRect.left - currentClientRect.left;
+    this.adapter_.addClass(MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION);
     this.adapter_.setContentStyleProperty('transform', `translateX(${xPosition}px) scaleX(${widthDelta})`);
 
-    // Force repaint
+    // Force repaint before updating classes and transform to ensure the transform properly takes effect
     this.computeContentClientRect();
 
-    // Add animating class and remove transformation in a new frame
-    requestAnimationFrame(() => {
-      this.adapter_.addClass(MDCTabIndicatorFoundation.cssClasses.SLIDING_ACTIVATE);
-      this.adapter_.setContentStyleProperty('transform', '');
-    });
-
-    this.adapter_.registerEventHandler('transitionend', this.handleTransitionEnd_);
+    this.adapter_.removeClass(MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION);
+    this.adapter_.addClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
+    this.adapter_.setContentStyleProperty('transform', '');
   }
 
   deactivate() {
     this.adapter_.removeClass(MDCTabIndicatorFoundation.cssClasses.ACTIVE);
-    // We remove the animating class in deactivate in case the Tab is deactivated before the animation completes and
-    // the "transitionend" handler isn't called.
-    this.adapter_.removeClass(MDCTabIndicatorFoundation.cssClasses.SLIDING_ACTIVATE);
-    this.adapter_.deregisterEventHandler('transitionend', this.handleTransitionEnd_);
   }
 }
 

test/unit/mdc-tab-indicator/fading-foundation.test.js

@@ -17,70 +17,21 @@
 
 import td from 'testdouble';
 
-import {captureHandlers} from '../helpers/foundation';
 import {setupFoundationTest} from '../helpers/setup';
 import MDCFadingTabIndicatorFoundation from '../../../packages/mdc-tab-indicator/fading-foundation';
 
 suite('MDCFadingTabIndicatorFoundation');
 
 const setupTest = () => setupFoundationTest(MDCFadingTabIndicatorFoundation);
 
-test('#activate registers a transitionend handler', () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.activate();
-  td.verify(mockAdapter.registerEventHandler('transitionend', td.matchers.isA(Function)));
-});
-
 test(`#activate adds the ${MDCFadingTabIndicatorFoundation.cssClasses.ACTIVE} class`, () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.activate();
   td.verify(mockAdapter.addClass(MDCFadingTabIndicatorFoundation.cssClasses.ACTIVE));
 });
 
-test(`#activate adds the ${MDCFadingTabIndicatorFoundation.cssClasses.FADING_ACTIVATE} class`, () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.activate();
-  td.verify(mockAdapter.addClass(MDCFadingTabIndicatorFoundation.cssClasses.FADING_ACTIVATE));
-});
-
-test('#deactivate registers a transitionend handler', () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.deactivate();
-  td.verify(mockAdapter.registerEventHandler('transitionend', td.matchers.isA(Function)));
-});
-
 test(`#deactivate removes the ${MDCFadingTabIndicatorFoundation.cssClasses.ACTIVE} class`, () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.deactivate();
   td.verify(mockAdapter.removeClass(MDCFadingTabIndicatorFoundation.cssClasses.ACTIVE));
 });
-
-test(`#deactivate adds the ${MDCFadingTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE} class`, () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.deactivate();
-  td.verify(mockAdapter.addClass(MDCFadingTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE));
-});
-
-test('on transitionend, deregister the transitionend handler', () => {
-  const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
-  foundation.activate();
-  handlers.transitionend();
-  td.verify(mockAdapter.deregisterEventHandler('transitionend', td.matchers.isA(Function)));
-});
-
-test(`on transitionend, remove the ${MDCFadingTabIndicatorFoundation.cssClasses.FADING_ACTIVATE} class`, () => {
-  const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
-  foundation.activate();
-  handlers.transitionend();
-  td.verify(mockAdapter.removeClass(MDCFadingTabIndicatorFoundation.cssClasses.FADING_ACTIVATE));
-});
-
-test(`on transitionend, remove the ${MDCFadingTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE} class`, () => {
-  const {foundation, mockAdapter} = setupTest();
-  const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
-  foundation.activate();
-  handlers.transitionend();
-  td.verify(mockAdapter.removeClass(MDCFadingTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE));
-});

test/unit/mdc-tab-indicator/foundation.test.js

@@ -34,7 +34,6 @@ test('exports strings', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCTabIndicatorFoundation, [
-    'registerEventHandler', 'deregisterEventHandler',
     'addClass', 'removeClass',
     'setContentStyleProperty',
     'computeContentClientRect',
@@ -52,13 +51,13 @@ test('#computeContentClientRect returns the client rect', () => {
 test('#activate is abstract and does nothing', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.activate();
-  td.verify(mockAdapter.addClass, {times: 0});
-  td.verify(mockAdapter.removeClass, {times: 0});
+  td.verify(mockAdapter.addClass(td.matchers.isA(String)), {times: 0});
+  td.verify(mockAdapter.removeClass(td.matchers.isA(String)), {times: 0});
 });
 
 test('#deactivate is abstract and does nothing', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.deactivate();
-  td.verify(mockAdapter.addClass, {times: 0});
-  td.verify(mockAdapter.removeClass, {times: 0});
+  td.verify(mockAdapter.addClass(td.matchers.isA(String)), {times: 0});
+  td.verify(mockAdapter.removeClass(td.matchers.isA(String)), {times: 0});
 });