本文整理匯總了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);
}
}