How to use the @material/animation/index.getCorrectEventName function in @material/animation

To help you get started, we’ve selected a few @material/animation examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github material-components / material-components-web / packages / mdc-slider / foundation.js View on Github external
updateUIForCurrentValue_() {
    const {max_: max, min_: min, value_: value} = this;
    const pctComplete = (value - min) / (max - min);
    let translatePx = pctComplete * this.rect_.width;
    if (this.adapter_.isRTL()) {
      translatePx = this.rect_.width - translatePx;
    }

    const transformProp = getCorrectPropertyName(window, 'transform');
    const transitionendEvtName = getCorrectEventName(window, 'transitionend');

    if (this.inTransit_) {
      const onTransitionEnd = () => {
        this.setInTransit_(false);
        this.adapter_.deregisterThumbContainerInteractionHandler(transitionendEvtName, onTransitionEnd);
      };
      this.adapter_.registerThumbContainerInteractionHandler(transitionendEvtName, onTransitionEnd);
    }

    this.updateUIFrame_ = requestAnimationFrame(() => {
      // NOTE(traviskaufman): It would be nice to use calc() here,
      // but IE cannot handle calcs in transforms correctly.
      // See: https://goo.gl/NC2itk
      // Also note that the -50% offset is used to center the slider thumb.
      this.adapter_.setThumbContainerStyleProperty(transformProp, `translateX(${translatePx}px) translateX(-50%)`);
      this.adapter_.setTrackStyleProperty(transformProp, `scaleX(${pctComplete})`);
github material-components / material-components-web-components / node_modules / @material / checkbox / index.js View on Github external
destroy() {
    this.ripple_.destroy();
    this.nativeCb_.removeEventListener('change', this.handleChange_);
    this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
    super.destroy();
  }
}
github pgbross / vue-material-adapter / packages / mcwv-checkbox / mdc-checkbox.js View on Github external
},
      isIndeterminate: () => this.$refs.control.indeterminate,
      isChecked: () => this.$refs.control.checked,
      hasNativeControl: () => true,
      setNativeControlDisabled: disabled =>
        (this.$refs.control.disabled = disabled),
      forceLayout: () => this.$refs.root.offsetWidth,
      isAttachedToDOM: () => true,
    };

    this.foundation = new MDCCheckboxFoundation(adapter);

    this.handleAnimationEnd_ = () => this.foundation.handleAnimationEnd();

    this.$el.addEventListener(
      getCorrectEventName(window, 'animationend'),
      this.handleAnimationEnd_,
    );

    this.installPropertyChangeHooks_();

    this.ripple = new RippleBase(this, {
      isUnbounded: () => true,
      isSurfaceActive: () => RippleBase.isSurfaceActive(this.$refs.control),
      registerInteractionHandler: (evt, handler) => {
        this.$refs.control.addEventListener(evt, handler, applyPassive());
      },
      deregisterInteractionHandler: (evt, handler) => {
        this.$refs.control.removeEventListener(evt, handler, applyPassive());
      },
      computeBoundingRect: () => {
        return this.$refs.root.getBoundingClientRect();
github material-components / material-components-web-components / node_modules / @material / checkbox / index.js View on Github external
initialSyncWithDOM() {
    this.handleChange_ = () => this.foundation_.handleChange();
    this.handleAnimationEnd_= () => this.foundation_.handleAnimationEnd();
    this.nativeCb_.addEventListener('change', this.handleChange_);
    this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
  }
github material-components / material-components-web / packages / mdc-checkbox / index.js View on Github external
        (handler) => this.root_.addEventListener(getCorrectEventName(window, 'animationend'), handler),
      deregisterAnimationEndHandler:
github pgbross / vue-material-adapter / packages / mcwv-checkbox / checkbox.js View on Github external
},
      isIndeterminate: () => this.$refs.control.indeterminate,
      isChecked: () => this.$refs.control.checked,
      hasNativeControl: () => true,
      setNativeControlDisabled: disabled =>
        (this.$refs.control.disabled = disabled),
      forceLayout: () => this.$refs.root.offsetWidth,
      isAttachedToDOM: () => true,
    };

    this.foundation = new MDCCheckboxFoundation(adapter);

    this.handleAnimationEnd_ = () => this.foundation.handleAnimationEnd();

    this.$el.addEventListener(
      getCorrectEventName(window, 'animationend'),
      this.handleAnimationEnd_,
    );

    this.installPropertyChangeHooks_();

    this.ripple = new RippleBase(this, {
      isUnbounded: () => true,
      isSurfaceActive: () => RippleBase.isSurfaceActive(this.$refs.control),
      registerInteractionHandler: (evt, handler) => {
        this.$refs.control.addEventListener(evt, handler, applyPassive());
      },
      deregisterInteractionHandler: (evt, handler) => {
        this.$refs.control.removeEventListener(evt, handler, applyPassive());
      },
      computeBoundingRect: () => {
        return this.$refs.root.getBoundingClientRect();
github material-components / material-components-web / packages / mdc-checkbox / index.js View on Github external
        (handler) => this.root_.removeEventListener(getCorrectEventName(window, 'animationend'), handler),
      registerChangeHandler: (handler) => this.nativeCb_.addEventListener('change', handler),
github pgbross / vue-material-adapter / packages / mcwv-checkbox / checkbox.js View on Github external
beforeDestroy() {
    this.$el.removeEventListener(
      getCorrectEventName(window, 'animationend'),
      this.handleAnimationEnd_,
    );

    this.formField.destroy();
    this.ripple.destroy();

    this.uninstallPropertyChangeHooks_();
    this.foundation.destroy();
  },
  methods: {
github pgbross / vue-material-adapter / packages / mcwv-checkbox / mdc-checkbox.js View on Github external
beforeDestroy() {
    this.$el.removeEventListener(
      getCorrectEventName(window, 'animationend'),
      this.handleAnimationEnd_,
    );

    this.formField.destroy();
    this.ripple.destroy();

    this.uninstallPropertyChangeHooks_();
    this.foundation.destroy();
  },
  methods: {