Insert dynamically animation parameters with ionic modal


#1

Hi, its possible adding parameters to ionic modal for change depends the position of the element? i want to recreate the ios 11 applestore modal.

this is my method

const productDetail = this.modalController.create(
      ProductDetailComponent,
      { productId: id },
      {
        enterAnimation: 'modal-scale-up-enter',
        leaveAnimation: 'modal-scale-up-leave'
      }
    );
    productDetail.present();

and this is the modal scale up enter

import { Animation, PageTransition } from 'ionic-angular';

export class ModalScaleUpEnterTransition extends PageTransition {
  public init() {
    const ele = this.enteringView.pageRef().nativeElement;
    const wrapper = new Animation(
      this.plt,
      ele.querySelector('.modal-wrapper')
    );

    wrapper.beforeStyles({ transform: 'scale()', opacity: 1 });
    wrapper.fromTo('transform', 'scale(0.8)', 'scale(1.0)');
    wrapper.fromTo('opacity', 1, 1);

    this.element(this.enteringView.pageRef())
      .duration(900)
      .easing('cubic-bezier(.1, .7, .1, 1)')
      .add(wrapper);
  }
}

and this the modal scale up leave

import { Animation, PageTransition } from 'ionic-angular';

export class ModalScaleUpEnterTransition extends PageTransition {
  public init() {
    const ele = this.enteringView.pageRef().nativeElement;
    const wrapper = new Animation(
      this.plt,
      ele.querySelector('.modal-wrapper')
    );

    wrapper.beforeStyles({ transform: 'scale()', opacity: 1 });
    wrapper.fromTo('transform', 'scale(0.8)', 'scale(1.0)');
    wrapper.fromTo('opacity', 1, 1);

    this.element(this.enteringView.pageRef())
      .duration(900)
      .easing('cubic-bezier(.1, .7, .1, 1)')
      .add(wrapper);
  }
}

i want to in the wrapper add something like this

  wrapper.beforeStyles({ transform: insertAnimation, opacity: 1 });
    wrapper.fromTo('transform', 'scale(0.8)', 'scale(1.0)');
    wrapper.fromTo('opacity', 1, 1);

and and insert the variable in the method