How to use the ember-css-transitions/mixins/transition-mixin.nextTick function in ember-css-transitions

To help you get started, we’ve selected a few ember-css-transitions 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 miguelcobain / ember-paper / addon / components / paper-tooltip-inner.js View on Github external
run.schedule('afterRender', () => {
      if (!this.isDestroyed) {
        let anchorElement = this.get('anchorElement');
        let pos = calculateTooltipPosition(this.element, anchorElement, this.get('position'));
        this.set('style', htmlSafe(`top: ${pos.top}px; left: ${pos.left}px`));
        this.set('hide', true);
        nextTick().then(nextTick).then(nextTick).then(nextTick).then(() => {
          if (!this.isDestroyed) {
            this.set('hide', false);
          }
        });
      }
    });
  }
github miguelcobain / ember-paper / addon / components / paper-menu-content.js View on Github external
animateIn() {
    this.dropdownElement.style.transform = this.get('transform');
    nextTick().then(() => {
      this.set('isActive', true);
      this.set('transform', null);
    });
  },
github miguelcobain / ember-paper / addon / mixins / ripple-mixin.js View on Github external
this.clearTimeout();
    this.timeout = run.later(this, function() {
      ctrl.clearTimeout();
      if (!ctrl.mousedown) {
        ctrl.fadeInComplete(ripple);
      }
    }, {}, DURATION * 0.35);

    if (this.get('dimBackground')) {
      this._container.style.cssText = `background-color: ${color}`;
    }
    this._container.appendChild(ripple);
    this.ripples.push(ripple);
    ripple.classList.add('md-ripple-placed');

    nextTick().then(() => {
      ripple.classList.add('md-ripple-scaled', 'md-ripple-active');
      run.later(this, function() {
        ctrl.clearRipples();
      }, {}, DURATION);
    });

    function rgbaToRGB(color) {
      return color ? color.replace('rgba', 'rgb').replace(/,[^),]+\)/, ')') : 'rgb(0,0,0)';
    }

    function getSize(fit, x, y) {
      return fit ? Math.max(x, y) : Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    }
  },
  fadeInComplete(ripple) {
github miguelcobain / ember-paper / addon / mixins / translate3d-mixin.js View on Github external
nextTick().then(() => {
      dialogClone.classList.remove('md-transition-in');
      dialogClone.classList.add('md-transition-out');
      dialogClone.style.cssText = toStyle;
      nextTick().then(() => {
        run.later(() => {
          if (containerClone.parentNode !== null) {
            containerClone.parentNode.removeChild(containerClone);
          }
          this.onTranslateToEnd(origin);

        }, computeTimeout(dialogClone) || 0);
      });
    });
  },

ember-css-transitions

Ember implementation of CSS Transitions. Just like ng-animate and react animation but for Ember.

MIT
Latest version published 2 months ago

Package Health Score

73 / 100
Full package analysis