本文整理汇总了TypeScript中ionic-angular/animations/animation.Animation.beforeStyles方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Animation.beforeStyles方法的具体用法？TypeScript Animation.beforeStyles怎么用？TypeScript Animation.beforeStyles使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类ionic-angular/animations/animation.Animation的用法示例。
在下文中一共展示了Animation.beforeStyles方法的1个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: 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);
}
}