demo/bundle.js
/**
               * Handles a transition end event on the root element.
               * @param {!Event} evt
               */
Handles a transition end event on the root element.
@param {!Event} evt
Handles a transition end event on the root element . @param { !Event } evt
handleTransitionEnd_(evt) {
                if (this.adapter_.eventTargetHasClass( (evt.target), cssClasses$2.CHIP_EXIT)) {
                  if (evt.propertyName === 'width') {
                    this.adapter_.notifyRemoval();
                  } else if (evt.propertyName === 'opacity') {
                    const chipWidth = this.adapter_.getComputedStyleValue('width');
                    requestAnimationFrame(() => {
                      this.adapter_.setStyleProperty('width', chipWidth);
                      this.adapter_.setStyleProperty('padding', '0');
                      this.adapter_.setStyleProperty('margin', '0');
                      requestAnimationFrame(() => {
                        this.adapter_.setStyleProperty('width', '0');
                      });
                    });
                  }
                  return;
                }
                if (evt.propertyName !== 'opacity') {
                  return;
                }
                if (this.adapter_.eventTargetHasClass( (evt.target), cssClasses$2.LEADING_ICON) &&
                    this.adapter_.hasClass(cssClasses$2.SELECTED)) {
                  this.adapter_.addClassToLeadingIcon(cssClasses$2.HIDDEN_LEADING_ICON);
                } else if (this.adapter_.eventTargetHasClass( (evt.target), cssClasses$2.CHECKMARK) &&
                           !this.adapter_.hasClass(cssClasses$2.SELECTED)) {
                  this.adapter_.removeClassFromLeadingIcon(cssClasses$2.HIDDEN_LEADING_ICON);
                }
              }
handleTransitionEnd_ ( evt ) { if ( this . adapter_ . eventTargetHasClass ( ( evt . target ) , cssClasses$2 . CHIP_EXIT ) ) { if ( evt . propertyName === 'width' ) { this . adapter_ . notifyRemoval ( ) ; } else if ( evt . propertyName === 'opacity' ) { const chipWidth = this . adapter_ . getComputedStyleValue ( 'width' ) ; requestAnimationFrame ( ( ) => { this . adapter_ . setStyleProperty ( 'width' , chipWidth ) ; this . adapter_ . setStyleProperty ( 'padding' , '0' ) ; this . adapter_ . setStyleProperty ( 'margin' , '0' ) ; requestAnimationFrame ( ( ) => { this . adapter_ . setStyleProperty ( 'width' , '0' ) ; } ) ; } ) ; } return ; } if ( evt . propertyName !== 'opacity' ) { return ; } if ( this . adapter_ . eventTargetHasClass ( ( evt . target ) , cssClasses$2 . LEADING_ICON ) && this . adapter_ . hasClass ( cssClasses$2 . SELECTED ) ) { this . adapter_ . addClassToLeadingIcon ( cssClasses$2 . HIDDEN_LEADING_ICON ) ; } else if ( this . adapter_ . eventTargetHasClass ( ( evt . target ) , cssClasses$2 . CHECKMARK ) && ! this . adapter_ . hasClass ( cssClasses$2 . SELECTED ) ) { this . adapter_ . removeClassFromLeadingIcon ( cssClasses$2 . HIDDEN_LEADING_ICON ) ; } }
Handles a transition end event on the root element.
Handles a transition end event on the root element .
// Handle transition end event on the chip when it is about to be removed. /** @type {!EventTarget} */ // See: https://css-tricks.com/using-css-transitions-auto-dimensions/#article-header-id-5 // On the next frame (once we get the computed width), explicitly set the chip's width // to its current pixel width, so we aren't transitioning out of 'auto'. // To mitigate jitter, start transitioning padding and margin before width. // On the next frame (once width is explicitly set), transition width to 0. // Handle a transition end event on the leading icon or checkmark, since the transition end event bubbles. /** @type {!EventTarget} */ /** @type {!EventTarget} */