TypeScript Animation.fromTo方法代碼示例

本文整理匯總了TypeScript中ionic-angular/animations/animation.Animation.fromTo方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Animation.fromTo方法的具體用法？TypeScript Animation.fromTo怎麽用？TypeScript Animation.fromTo使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類ionic-angular/animations/animation.Animation的用法示例。

在下文中一共展示了Animation.fromTo方法的4個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: init

  init() {
    super.init();

    const plt = this.plt;
    const enteringView = this.enteringView;
    const leavingView = this.leavingView;
    const opts = this.opts;
    //opts.duration = 2000;

    // what direction is the transition going
    const backDirection = opts.direction === 'back';

    if (enteringView) {
      if (backDirection) {
        this.duration(isPresent(opts.duration) ? opts.duration : 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
      } else {
        this.duration(isPresent(opts.duration) ? opts.duration : 280).easing('cubic-bezier(0.36,0.66,0.04,1)');
        this.enteringPage.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
        if (leavingView) {
          const leavingPage = new Animation(this.plt, leavingView.pageRef());
          this.add(leavingPage.fromTo('scale', '1', '0.9', true));
        }
      }

      if (enteringView.hasNavbar()) {
        const enteringPageEle: Element = enteringView.pageRef().nativeElement;
        const enteringNavbarEle: Element = enteringPageEle.querySelector('ion-navbar');

        const enteringNavBar = new Animation(plt, enteringNavbarEle);
        this.add(enteringNavBar);

        const enteringBackButton = new Animation(plt, enteringNavbarEle.querySelector('.back-button'));
        this.add(enteringBackButton);
        if (enteringView.enableBack()) {
          enteringBackButton.beforeAddClass(SHOW_BACK_BTN_CSS);
        } else {
          enteringBackButton.beforeRemoveClass(SHOW_BACK_BTN_CSS);
        }
      }
    }

    // setup leaving view
    if (leavingView && backDirection) {
      // leaving content
      this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
      const leavingPage = new Animation(plt, leavingView.pageRef());
      this.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fromTo('opacity', 1, 0));
    }
  }

開發者ID:ifiske，項目名稱:iFiske，代碼行數:49，代碼來源:transition-md.ts

示例2: init

  init() {
      console.log("SlideUpTransition");
    super.init();

    const enteringView = this.enteringView;
    const leavingView = this.leavingView;
    const opts = this.opts;

    this.duration(isPresent(opts.duration) ? opts.duration : DURATION);

    const forwardDirection = (opts.direction === 'forward');
    const backDirection = (opts.direction === 'back');

    if (enteringView) {
        console.log("enteringView");
      const enteringPageEle: Element = enteringView.pageRef().nativeElement;

      const enteringContent = new Animation(this.plt,enteringView.pageRef());
      this.add(enteringContent);
      if (forwardDirection) {
          enteringContent.fromTo(OPACITY, OPAQUE, OPAQUE, true);
          enteringContent.fromTo('translateY', '100%', '0%');          
      }
    //   } else if(backDirection){
    //       enteringContent.fromTo(OPACITY, OPAQUE, OPAQUE, true);
    //       enteringContent.fromTo('translateY', '0%', '100%');
    //   }
    }

    if (leavingView && leavingView.pageRef()) { //no effect
      console.log("leavingView");

      const leavingPageEle: Element = leavingView.pageRef().nativeElement;
      const leavingContent = new Animation( this.plt,leavingView.pageRef());

      this.add(leavingContent);

      if (backDirection) {
         leavingContent.fromTo(OPACITY, OPAQUE, OPAQUE, true);
         leavingContent.fromTo('translateY', '0%', '100%');
      }
      
    }
  }

開發者ID:raceyi，項目名稱:takit，代碼行數:44，代碼來源:slide-up-transition.ts

示例3: init

    /**
     * Animation.
     */
    init(): void {
        const enteringView = this.enteringView;
        const leavingView = this.leavingView;

        const plt = this.plt;
        const OFF_RIGHT = plt.isRTL ? '-100%' : '100%';

        if (enteringView && enteringView.pageRef()) {
            const ele = enteringView.pageRef().nativeElement;
            const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
            const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));

            wrapper.beforeStyles({ transform: 'translateX(' + OFF_RIGHT + ')', opacity: 0.8 });
            wrapper.fromTo('transform', 'translateX(' + OFF_RIGHT + ')', 'translateX(0)');
            wrapper.fromTo('opacity', 0.8, 1);
            backdrop.fromTo('opacity', 0.01, 0.4);

            this
                .element(enteringView.pageRef())
                .duration(300)
                .easing('cubic-bezier(0.36,0.66,0.04,1)')
                .add(wrapper)
                .add(backdrop);
        }

        if (leavingView && leavingView.pageRef()) {
            const ele = this.leavingView.pageRef().nativeElement;
            const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
            const contentWrapper = new Animation(this.plt, ele.querySelector('.wrapper'));
            const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));

            wrapper.beforeStyles({ transform: 'translateX(0)', opacity: 1 });
            wrapper.fromTo('transform', 'translateX(0)', 'translateX(' + OFF_RIGHT + ')');
            wrapper.fromTo('opacity', 1, 0.8);
            contentWrapper.fromTo('opacity', 1, 0);
            backdrop.fromTo('opacity', 0.4, 0);

            this
                .element(leavingView.pageRef())
                .duration(300)
                .easing('cubic-bezier(0.36,0.66,0.04,1)')
                .add(contentWrapper)
                .add(wrapper)
                .add(backdrop);

        }
    }

開發者ID:santosleonardo，項目名稱:moodlemobile2，代碼行數:50，代碼來源:modal-lateral-transition.ts

示例4: init

 init(): void {
     super.init();
     const plt = this.plt;
     const OFF_RIGHT = plt.isRTL ? '-99.5%' : '99.5%';
     const OFF_LEFT = plt.isRTL ? '33%' : '-33%';
     const enteringView = this.enteringView;
     const leavingView = this.leavingView;
     const opts = this.opts;
     this.duration(isPresent(opts.duration) ? opts.duration : DURATION);
     this.easing(isPresent(opts.easing) ? opts.easing : EASING);
     const backDirection = (opts.direction === 'back');
     const enteringHasNavbar = (enteringView && enteringView.hasNavbar());
     const leavingHasNavbar = (leavingView && leavingView.hasNavbar());
     if (enteringView) {
         // Get the native element for the entering page.
         const enteringPageEle = enteringView.pageRef().nativeElement;
         // Entering content.
         const enteringContent = new Animation(plt, enteringPageEle);
         this.add(enteringContent);
         if (backDirection) {
             // Entering content, back direction.
             enteringContent
                 .fromTo(TRANSLATEX, OFF_LEFT, CENTER, true)
                 .fromTo(OPACITY, OFF_OPACITY, 1, true);
         }
         else {
             // Entering content, forward direction.
             enteringContent
                 .beforeClearStyles([OPACITY])
                 .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
         }
         if (enteringHasNavbar) {
             // Entering page has a navbar.
             const enteringNavbarEle = enteringPageEle.querySelector('ion-navbar');
             const enteringNavBar = new Animation(plt, enteringNavbarEle);
             this.add(enteringNavBar);
             const enteringBackButton = new Animation(plt, enteringNavbarEle.querySelector('.back-button'));
             enteringNavBar
                 .add(enteringBackButton);
             // Set properties depending on direction.
             if (backDirection) {
                 // Entering navbar, back direction.
                 if (enteringView.enableBack()) {
                     // Back direction, entering page has a back button.
                     enteringBackButton
                         .beforeAddClass(SHOW_BACK_BTN_CSS)
                         .fromTo(OPACITY, 0.01, 1, true);
                 }
             }
             else {
                 // Entering navbar, forward direction.
                 if (enteringView.enableBack()) {
                     // Forward direction, entering page has a back button.
                     enteringBackButton
                         .beforeAddClass(SHOW_BACK_BTN_CSS)
                         .fromTo(OPACITY, 0.01, 1, true);
                     const enteringBackBtnText = new Animation(plt, enteringNavbarEle.querySelector('.back-button-text'));
                     enteringBackBtnText.fromTo(TRANSLATEX, (plt.isRTL ? '-100px' : '100px'), '0px');
                     enteringNavBar.add(enteringBackBtnText);
                 }
                 else {
                     enteringBackButton.beforeRemoveClass(SHOW_BACK_BTN_CSS);
                 }
             }
         }
     }
     // Setup leaving view.
     if (leavingView && leavingView.pageRef()) {
         // Leaving content.
         const leavingPageEle = leavingView.pageRef().nativeElement;
         const leavingContent = new Animation(plt, leavingPageEle);
         this.add(leavingContent);
         if (backDirection) {
             // Leaving content, back direction.
             leavingContent
                 .beforeClearStyles([OPACITY])
                 .fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
         }
         else {
             // Leaving content, forward direction.
             leavingContent
                 .fromTo(TRANSLATEX, CENTER, OFF_LEFT)
                 .fromTo(OPACITY, 1, OFF_OPACITY)
                 .afterClearStyles([TRANSFORM, OPACITY]);
         }
         if (leavingHasNavbar) {
             // Leaving page has a navbar.
             const leavingNavbarEle = leavingPageEle.querySelector('ion-navbar');
             const leavingNavBar = new Animation(plt, leavingNavbarEle);
             const leavingBackButton = new Animation(plt, leavingNavbarEle.querySelector('.back-button'));
             leavingNavBar
                 .add(leavingBackButton);
             this.add(leavingNavBar);
             // Fade out leaving navbar items.
             leavingBackButton.fromTo(OPACITY, 0.99, 0);
             if (backDirection) {
                 const leavingBackBtnText = new Animation(plt, leavingNavbarEle.querySelector('.back-button-text'));
                 leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? -300 : 300) + 'px');
                 leavingNavBar.add(leavingBackBtnText);
             }
//.........這裏部分代碼省略.........

開發者ID:SATS-Seminary，項目名稱:moodlemobile2，代碼行數:101，代碼來源:page-transition.ts

注：本文中的ionic-angular/animations/animation.Animation.fromTo方法示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。