Question

是否可能在离子模态中添加参数以进行更改取决于元素的位置？我想重新创建ios 11 applestore模式。

这是我的方法

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

这是模态放大输入

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

这是模式扩展假

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

我想在包装中添加类似的内容

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

然后将变量插入方法

使用离子模态动态插入动画参数

0 个答案: