本文整理汇总了TypeScript中ionic-angular/animations/animation.Animation.fromTo方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Animation.fromTo方法的具体用法？TypeScript Animation.fromTo怎么用？TypeScript Animation.fromTo使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类ionic-angular/animations/animation.Animation的用法示例。
在下文中一共展示了Animation.fromTo方法的4个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: init
init() {
super.init();
const plt = this.plt;
const enteringView = this.enteringView;
const leavingView = this.leavingView;
const opts = this.opts;
//opts.duration = 2000;
// what direction is the transition going
const backDirection = opts.direction === 'back';
if (enteringView) {
if (backDirection) {
this.duration(isPresent(opts.duration) ? opts.duration : 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
} else {
this.duration(isPresent(opts.duration) ? opts.duration : 280).easing('cubic-bezier(0.36,0.66,0.04,1)');
this.enteringPage.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
if (leavingView) {
const leavingPage = new Animation(this.plt, leavingView.pageRef());
this.add(leavingPage.fromTo('scale', '1', '0.9', true));
}
}
if (enteringView.hasNavbar()) {
const enteringPageEle: Element = enteringView.pageRef().nativeElement;
const enteringNavbarEle: Element = enteringPageEle.querySelector('ion-navbar');
const enteringNavBar = new Animation(plt, enteringNavbarEle);
this.add(enteringNavBar);
const enteringBackButton = new Animation(plt, enteringNavbarEle.querySelector('.back-button'));
this.add(enteringBackButton);
if (enteringView.enableBack()) {
enteringBackButton.beforeAddClass(SHOW_BACK_BTN_CSS);
} else {
enteringBackButton.beforeRemoveClass(SHOW_BACK_BTN_CSS);
}
}
}
// setup leaving view
if (leavingView && backDirection) {
// leaving content
this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
const leavingPage = new Animation(plt, leavingView.pageRef());
this.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fromTo('opacity', 1, 0));
}
}示例2: init
init() {
console.log("SlideUpTransition");
super.init();
const enteringView = this.enteringView;
const leavingView = this.leavingView;
const opts = this.opts;
this.duration(isPresent(opts.duration) ? opts.duration : DURATION);
const forwardDirection = (opts.direction === 'forward');
const backDirection = (opts.direction === 'back');
if (enteringView) {
console.log("enteringView");
const enteringPageEle: Element = enteringView.pageRef().nativeElement;
const enteringContent = new Animation(this.plt,enteringView.pageRef());
this.add(enteringContent);
if (forwardDirection) {
enteringContent.fromTo(OPACITY, OPAQUE, OPAQUE, true);
enteringContent.fromTo('translateY', '100%', '0%');
}
// } else if(backDirection){
// enteringContent.fromTo(OPACITY, OPAQUE, OPAQUE, true);
// enteringContent.fromTo('translateY', '0%', '100%');
// }
}
if (leavingView && leavingView.pageRef()) { //no effect
console.log("leavingView");
const leavingPageEle: Element = leavingView.pageRef().nativeElement;
const leavingContent = new Animation( this.plt,leavingView.pageRef());
this.add(leavingContent);
if (backDirection) {
leavingContent.fromTo(OPACITY, OPAQUE, OPAQUE, true);
leavingContent.fromTo('translateY', '0%', '100%');
}
}
}示例3: 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);
}
}示例4: init
init(): void {
super.init();
const plt = this.plt;
const OFF_RIGHT = plt.isRTL ? '-99.5%' : '99.5%';
const OFF_LEFT = plt.isRTL ? '33%' : '-33%';
const enteringView = this.enteringView;
const leavingView = this.leavingView;
const opts = this.opts;
this.duration(isPresent(opts.duration) ? opts.duration : DURATION);
this.easing(isPresent(opts.easing) ? opts.easing : EASING);
const backDirection = (opts.direction === 'back');
const enteringHasNavbar = (enteringView && enteringView.hasNavbar());
const leavingHasNavbar = (leavingView && leavingView.hasNavbar());
if (enteringView) {
// Get the native element for the entering page.
const enteringPageEle = enteringView.pageRef().nativeElement;
// Entering content.
const enteringContent = new Animation(plt, enteringPageEle);
this.add(enteringContent);
if (backDirection) {
// Entering content, back direction.
enteringContent
.fromTo(TRANSLATEX, OFF_LEFT, CENTER, true)
.fromTo(OPACITY, OFF_OPACITY, 1, true);
}
else {
// Entering content, forward direction.
enteringContent
.beforeClearStyles([OPACITY])
.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
}
if (enteringHasNavbar) {
// Entering page has a navbar.
const enteringNavbarEle = enteringPageEle.querySelector('ion-navbar');
const enteringNavBar = new Animation(plt, enteringNavbarEle);
this.add(enteringNavBar);
const enteringBackButton = new Animation(plt, enteringNavbarEle.querySelector('.back-button'));
enteringNavBar
.add(enteringBackButton);
// Set properties depending on direction.
if (backDirection) {
// Entering navbar, back direction.
if (enteringView.enableBack()) {
// Back direction, entering page has a back button.
enteringBackButton
.beforeAddClass(SHOW_BACK_BTN_CSS)
.fromTo(OPACITY, 0.01, 1, true);
}
}
else {
// Entering navbar, forward direction.
if (enteringView.enableBack()) {
// Forward direction, entering page has a back button.
enteringBackButton
.beforeAddClass(SHOW_BACK_BTN_CSS)
.fromTo(OPACITY, 0.01, 1, true);
const enteringBackBtnText = new Animation(plt, enteringNavbarEle.querySelector('.back-button-text'));
enteringBackBtnText.fromTo(TRANSLATEX, (plt.isRTL ? '-100px' : '100px'), '0px');
enteringNavBar.add(enteringBackBtnText);
}
else {
enteringBackButton.beforeRemoveClass(SHOW_BACK_BTN_CSS);
}
}
}
}
// Setup leaving view.
if (leavingView && leavingView.pageRef()) {
// Leaving content.
const leavingPageEle = leavingView.pageRef().nativeElement;
const leavingContent = new Animation(plt, leavingPageEle);
this.add(leavingContent);
if (backDirection) {
// Leaving content, back direction.
leavingContent
.beforeClearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
}
else {
// Leaving content, forward direction.
leavingContent
.fromTo(TRANSLATEX, CENTER, OFF_LEFT)
.fromTo(OPACITY, 1, OFF_OPACITY)
.afterClearStyles([TRANSFORM, OPACITY]);
}
if (leavingHasNavbar) {
// Leaving page has a navbar.
const leavingNavbarEle = leavingPageEle.querySelector('ion-navbar');
const leavingNavBar = new Animation(plt, leavingNavbarEle);
const leavingBackButton = new Animation(plt, leavingNavbarEle.querySelector('.back-button'));
leavingNavBar
.add(leavingBackButton);
this.add(leavingNavBar);
// Fade out leaving navbar items.
leavingBackButton.fromTo(OPACITY, 0.99, 0);
if (backDirection) {
const leavingBackBtnText = new Animation(plt, leavingNavbarEle.querySelector('.back-button-text'));
leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? -300 : 300) + 'px');
leavingNavBar.add(leavingBackBtnText);
}
//.........这里部分代码省略.........