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