How to use ember-css-transitions - 9 common examples

// This is for to force a repaint,
    // which is necessary in order to transition styles when adding a class name.
    element.scrollTop;
    // add active class after repaint
    this.addClass(activeClassName);

    // if we're animating a class removal
    // we need to remove the class
    if (animationType === 'remove') {
      this.removeClass(transitionClass);
    }

    // wait for ember to apply classes
    // set timeout for animation end
    await sleep(computeTimeout(element) || 0);

    this.removeClass(className);
    this.removeClass(activeClassName);
  }

async transition(animationType, transitionClass) {
    let element = this.el;

    let className = `${transitionClass}-${animationType}`;
    let activeClassName = `${className}-active`;

    // add first class right away
    this.addClass(className);

    await nextTick()

    // This is for to force a repaint,
    // which is necessary in order to transition styles when adding a class name.
    element.scrollTop;
    // add active class after repaint
    this.addClass(activeClassName);

    // if we're animating a class removal
    // we need to remove the class
    if (animationType === 'remove') {
      this.removeClass(transitionClass);
    }

    // wait for ember to apply classes
    // set timeout for animation end
    await sleep(computeTimeout(element) || 0);

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);
          }
        });
      }
    });
  }

animateIn() {
    this.dropdownElement.style.transform = this.get('transform');
    nextTick().then(() => {
      this.set('isActive', true);
      this.set('transform', null);
    });
  },

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) {

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);
      });
    });
  },

async didInstall() {
    this.applyClasses();

    let transitionClass = this.transitionClass;

    if (transitionClass) {
      let animationType = 'enter';
      let className = `${transitionClass}-${animationType}`;
      this.addClass(className);

      await nextTick();
      await this.transition('enter', transitionClass);

      if (this.args.named.didTransitionIn) {
        this.args.named.didTransitionIn();
      }
    }
  }

nextTick().then(() => {
        run.later(() => {
          if (containerClone.parentNode !== null) {
            containerClone.parentNode.removeChild(containerClone);
          }
          this.onTranslateToEnd(origin);

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

nextTick().then(() => {
        if (this.isDestroyed) {
          return;
        }
        run.later(() => {
          if (!this.get('isDestroying') && !this.get('isDestroyed')) {
            this.onTranslateFromEnd();
          }
        }, computeTimeout(this.element) || 0);
        if (!this.get('isDestroying') && !this.get('isDestroyed')) {
          this.set('transformStyleApply', 'main');
          this.set('transformIn', true);
        }
      });
    });