Instantly share code, notes, and snippets.

Embed
What would you like to do?
custom ionic page transitions: "slide" and "slide-down"
import {Animation} from "ionic-angular/animations/animation";
import {isPresent} from "ionic-angular/util/util";
import {PageTransition} from "ionic-angular/transitions/page-transition";
const DURATION = 500;
const TRANSFORM = "transform";
const MOVED_DOWN = "translateY(100%)";
const NOT_MOVED = "translateY(0)";
const ZINDEX = "z-index";
const OPACITY = "opacity";
const INDEX_FRONT = 101;
const INDEX_BACK = 100;
const OPAQUE = 1;
export class SlideDownTransition extends PageTransition {
init() {
super.init();
const enteringView = this.enteringView;
const leavingView = this.leavingView;
const opts = this.opts;
this.duration(isPresent(opts.duration) ? opts.duration : DURATION);
const backDirection = (opts.direction === 'back');
if (enteringView) {
const enteringContent = new Animation(this.plt, enteringView.pageRef());
this.add(enteringContent);
if (backDirection) {
enteringContent
.fromTo(TRANSFORM, MOVED_DOWN, NOT_MOVED, false)
.fromTo(OPACITY, OPAQUE, OPAQUE, false)
.fromTo(ZINDEX, INDEX_FRONT, INDEX_FRONT, false);
} else {
enteringContent
.fromTo(TRANSFORM, NOT_MOVED, NOT_MOVED, false)
.fromTo(OPACITY, OPAQUE, OPAQUE, false)
.fromTo(ZINDEX, INDEX_BACK, INDEX_BACK, false);
}
}
if (leavingView && leavingView.pageRef()) {
const leavingContent = new Animation(this.plt, leavingView.pageRef());
this.add(leavingContent);
if (backDirection) {
leavingContent
.fromTo(TRANSFORM, NOT_MOVED, NOT_MOVED, false)
.fromTo(OPACITY, OPAQUE, OPAQUE, false)
.fromTo(ZINDEX, INDEX_BACK, INDEX_BACK, false);
} else {
leavingContent
.fromTo(TRANSFORM, NOT_MOVED, MOVED_DOWN, false)
.fromTo(OPACITY, OPAQUE, OPAQUE, false)
.fromTo(ZINDEX, INDEX_FRONT, INDEX_FRONT, false)
.afterClearStyles([TRANSFORM, OPACITY]);
}
}
}
}
import {Animation, PageTransition} from "ionic-angular";
import {isPresent} from "ionic-angular/util/util";
const DURATION = 500;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
const OPACITY = 'opacity';
const TRANSFORM = 'transform';
const TRANSLATEX = 'translateX';
const CENTER = '0%';
const OFF_OPACITY = 1;
export class SlideTransition extends PageTransition {
init() {
super.init();
const plt = this.plt;
const OFF_RIGHT = plt.isRTL ? '-100%' : '100%';
const OFF_LEFT = plt.isRTL ? '100%' : '-100%';
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');
if (enteringView) {
const enteringContent = new Animation(plt, enteringView.pageRef());
this.add(enteringContent);
if (backDirection) {
enteringContent
.fromTo(TRANSLATEX, OFF_LEFT, CENTER, true)
.fromTo(OPACITY, OFF_OPACITY, OFF_OPACITY, false);
} else {
enteringContent
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, OFF_OPACITY, OFF_OPACITY, false)
.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
}
}
if (leavingView && leavingView.pageRef()) {
const leavingContent = new Animation(plt, leavingView.pageRef());
this.add(leavingContent);
if (backDirection) {
leavingContent
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, OFF_OPACITY, OFF_OPACITY, false)
.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
} else {
leavingContent
.fromTo(OPACITY, OFF_OPACITY, OFF_OPACITY, false)
.fromTo(TRANSLATEX, CENTER, OFF_LEFT)
.afterClearStyles([TRANSFORM, OPACITY]);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment