How to use the metal-dom.addClasses function in metal-dom

let showOrHide = () => {
      if (this.isDisposed()) {
        return;
      }

      dom.removeClasses(
        this.element,
        this.animClasses[visible ? 'hide' : 'show']
      );
      dom.addClasses(this.element, this.animClasses[visible ? 'show' : 'hide']);

      // Some browsers do not fire transitionend events when running in background
      // tab, see https://bugzilla.mozilla.org/show_bug.cgi?id=683696.
      Anim.emulateEnd(this.element);

      if (visible && core.isNumber(this.hideDelay)) {
        this.syncHideDelay(this.hideDelay);
      }
    };

hide_(element) {
    dom.addClasses(element, 'hide');
  }

updateCompleted() {
    for (let i = 0; i < this.regions.length; i++) {
      let element = this.resolveElement(this.regions[i].link);
      if (i < this.activeIndex) {
        dom.addClasses(element, this.completedClass);
      } else {
        dom.removeClasses(element, this.completedClass);
      }
    }
  }

dom.removeClasses(this.element, this.positionCss_);
    switch (position) {
    case Align.Top:
    case Align.TopLeft:
    case Align.TopRight:
      this.positionCss_ = 'autocomplete-top';
      break;
    case Align.Bottom:
    case Align.BottomLeft:
    case Align.BottomRight:
      this.positionCss_ = 'autocomplete-bottom';
      break;
    default:
      this.positionCss_ = null;
    }
    dom.addClasses(this.element, this.positionCss_);
  }

_hide(element) {
		dom.addClasses(element, 'hide');
	}

hide_(element) {
    dom.addClasses(element, 'hide');
  }

_hide(element) {
		dom.addClasses(element, 'hide');
	}

setTimeout(() => {
      if (visible) {
        dom.addClasses(this.element, 'showing');
      } else {
        dom.removeClasses(this.element, 'showing');
      }
    }, 20);
  }