fix(linear-progress): disable animations when closed

PiperOrigin-RevId: 331803507

Author: allan-chen

CHANGELOG.md

@@ -41,6 +41,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - removed aria-hidden="true" from button
 - `linear-progress`
   - Fixed performance issues with indeterminate set on modern browsers
+  - Animations no longer run when indicator has been closed.
 
 ## [v0.18.0] - 2020-08-03
 

packages/linear-progress/mwc-linear-progress-base.ts

@@ -41,7 +41,7 @@ export class LinearProgressBase extends LitElement {
   @internalProperty() protected styleSecondaryHalf = '';
   @internalProperty() protected styleSecondaryFull = '';
   @internalProperty() protected animationReady = true;
-
+  @internalProperty() protected closedAnimationOff = false;
   protected resizeObserver: ResizeObserver|null = null;
 
   connectedCallback() {
@@ -59,6 +59,7 @@ export class LinearProgressBase extends LitElement {
     /** @classMap */
     const classes = {
       'mdc-linear-progress--closed': this.closed,
+      'mdc-linear-progress--closed-animation-off': this.closedAnimationOff,
       'mdc-linear-progress--indeterminate': this.indeterminate,
       'mdc-linear-progress--reversed': this.reverse,
       // needed for controller-less render
@@ -101,7 +102,8 @@ export class LinearProgressBase extends LitElement {
           aria-valuemin="0"
           aria-valuemax="1"
           aria-valuenow=${
-        ifDefined(this.indeterminate ? undefined : this.progress)}>
+        ifDefined(this.indeterminate ? undefined : this.progress)}
+        @transitionend=${this.syncClosedState}>
         <div class="mdc-linear-progress__buffer">
           <div
             class="mdc-linear-progress__buffer-bar"
@@ -120,12 +122,29 @@ export class LinearProgressBase extends LitElement {
       </div>`;
   }
 
+  update(changedProperties: Map<string, string>) {
+    // - When showing the indicator, enable animations immediately.
+    // - On first render, disable the animation immediately.
+    // - For normal calls to hide the component, let transitionend event trigger
+    //   disabling of animations instead (see render method), so that animation
+    //   does not jump in the middle of fade out.
+    if (changedProperties.has('closed') &&
+        (!this.closed || changedProperties.get('closed') === undefined)) {
+      this.syncClosedState();
+    }
+    super.update(changedProperties);
+  }
+
   async firstUpdated(changed: PropertyValues) {
     super.firstUpdated(changed);
 
     this.attachResizeObserver();
   }
 
+  private syncClosedState() {
+    this.closedAnimationOff = this.closed;
+  }
+
   protected updated(changed: PropertyValues) {
     // restart animation for timing if reverse changed and is indeterminate.
     // don't restart here if indeterminate has changed as well because we don't

packages/linear-progress/test/mwc-linear-progress.test.ts

@@ -427,13 +427,18 @@ suite('mwc-linear-progress', () => {
           HTMLElement;
       assert.isNotNull(root);
 
+      await element.updateComplete;
       assert.isTrue(root.classList.contains('mdc-linear-progress--closed'));
+      assert.isTrue(
+          root.classList.contains('mdc-linear-progress--closed-animation-off'));
 
       element.closed = false;
 
       await element.updateComplete;
 
       assert.isFalse(root.classList.contains('mdc-linear-progress--closed'));
+      assert.isFalse(
+          root.classList.contains('mdc-linear-progress--closed-animation-off'));
     });
 
     test('open, close methods set the correct classes', async () => {