mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
chore(build): rename ionic directory to src and update all references in the build process.
This commit is contained in:
Josh Thomas
194
src/transitions/transition-ios.ts
Normal file
194
src/transitions/transition-ios.ts
Normal file
@ -0,0 +1,194 @@
|
||||
import {Animation} from '../animations/animation';
|
||||
import {Transition, TransitionOptions} from './transition';
|
||||
import {ViewController} from '../components/nav/view-controller';
|
||||
|
||||
const DURATION = 500;
|
||||
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
|
||||
const OPACITY = 'opacity';
|
||||
const TRANSLATEX = 'translateX';
|
||||
const OFF_RIGHT = '99.5%';
|
||||
const OFF_LEFT = '-33%';
|
||||
const CENTER = '0%';
|
||||
const OFF_OPACITY = 0.8;
|
||||
const SHOW_BACK_BTN_CSS = 'show-back-button';
|
||||
|
||||
|
||||
class IOSTransition extends Transition {
|
||||
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(opts);
|
||||
|
||||
this.duration(opts.duration || DURATION);
|
||||
this.easing(opts.easing || EASING);
|
||||
|
||||
// what direction is the transition going
|
||||
let backDirection = (opts.direction === 'back');
|
||||
|
||||
// do they have navbars?
|
||||
let enteringHasNavbar = enteringView.hasNavbar();
|
||||
let leavingHasNavbar = leavingView && leavingView.hasNavbar();
|
||||
|
||||
let enteringPage = new Animation(enteringView.pageRef());
|
||||
enteringPage.before.addClass('show-page');
|
||||
this.add(enteringPage);
|
||||
|
||||
// entering content
|
||||
let enteringContent = new Animation(enteringView.contentRef());
|
||||
enteringContent.element(enteringView.toolbarRefs());
|
||||
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
|
||||
.before.clearStyles([OPACITY])
|
||||
.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
|
||||
}
|
||||
|
||||
if (enteringHasNavbar) {
|
||||
// entering page has a navbar
|
||||
let enteringNavBar = new Animation(enteringView.navbarRef());
|
||||
enteringNavBar.before.addClass('show-navbar');
|
||||
this.add(enteringNavBar);
|
||||
|
||||
let enteringTitle = new Animation(enteringView.titleRef());
|
||||
let enteringNavbarItems = new Animation(enteringView.navbarItemRefs());
|
||||
let enteringNavbarBg = new Animation(enteringView.navbarBgRef());
|
||||
let enteringBackButton = new Animation(enteringView.backBtnRef());
|
||||
enteringNavBar
|
||||
.add(enteringTitle)
|
||||
.add(enteringNavbarItems)
|
||||
.add(enteringNavbarBg)
|
||||
.add(enteringBackButton);
|
||||
|
||||
enteringTitle.fadeIn();
|
||||
enteringNavbarItems.fadeIn();
|
||||
|
||||
// set properties depending on direction
|
||||
if (backDirection) {
|
||||
// entering navbar, back direction
|
||||
enteringTitle.fromTo(TRANSLATEX, OFF_LEFT, CENTER, true);
|
||||
|
||||
if (enteringView.enableBack()) {
|
||||
// back direction, entering page has a back button
|
||||
enteringBackButton
|
||||
.before.addClass(SHOW_BACK_BTN_CSS)
|
||||
.fadeIn();
|
||||
}
|
||||
|
||||
} else {
|
||||
// entering navbar, forward direction
|
||||
enteringTitle.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
|
||||
|
||||
if (leavingHasNavbar) {
|
||||
// entering navbar, forward direction, and there's a leaving navbar
|
||||
// should just fade in, no sliding
|
||||
enteringNavbarBg
|
||||
.before.clearStyles([TRANSLATEX])
|
||||
.fadeIn();
|
||||
|
||||
} else {
|
||||
// entering navbar, forward direction, and there's no leaving navbar
|
||||
// should just slide in, no fading in
|
||||
enteringNavbarBg
|
||||
.before.clearStyles([OPACITY])
|
||||
.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
|
||||
}
|
||||
|
||||
|
||||
if (enteringView.enableBack()) {
|
||||
// forward direction, entering page has a back button
|
||||
enteringBackButton
|
||||
.before.addClass(SHOW_BACK_BTN_CSS)
|
||||
.fadeIn();
|
||||
|
||||
let enteringBackBtnText = new Animation(enteringView.backBtnTextRef());
|
||||
enteringBackBtnText.fromTo(TRANSLATEX, '100px', '0px');
|
||||
enteringNavBar.add(enteringBackBtnText);
|
||||
|
||||
} else {
|
||||
enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// setup leaving view
|
||||
if (leavingView) {
|
||||
// leaving content
|
||||
let leavingContent = new Animation(leavingView.contentRef());
|
||||
leavingContent.element(leavingView.toolbarRefs());
|
||||
this.add(leavingContent);
|
||||
|
||||
if (backDirection) {
|
||||
// leaving content, back direction
|
||||
leavingContent
|
||||
.before.clearStyles([OPACITY])
|
||||
.fromTo(TRANSLATEX, CENTER, '100%');
|
||||
|
||||
} else {
|
||||
// leaving content, forward direction
|
||||
leavingContent
|
||||
.fromTo(TRANSLATEX, CENTER, OFF_LEFT)
|
||||
.fromTo(OPACITY, 1, OFF_OPACITY);
|
||||
}
|
||||
|
||||
if (leavingHasNavbar) {
|
||||
// leaving page has a navbar
|
||||
let leavingNavBar = new Animation(leavingView.navbarRef());
|
||||
let leavingBackButton = new Animation(leavingView.backBtnRef());
|
||||
let leavingTitle = new Animation(leavingView.titleRef());
|
||||
let leavingNavbarItems = new Animation(leavingView.navbarItemRefs());
|
||||
let leavingNavbarBg = new Animation(leavingView.navbarBgRef());
|
||||
|
||||
leavingNavBar
|
||||
.add(leavingBackButton)
|
||||
.add(leavingTitle)
|
||||
.add(leavingNavbarItems)
|
||||
.add(leavingNavbarBg);
|
||||
this.add(leavingNavBar);
|
||||
|
||||
// fade out leaving navbar items
|
||||
leavingBackButton.fadeOut();
|
||||
leavingTitle.fadeOut();
|
||||
leavingNavbarItems.fadeOut();
|
||||
|
||||
if (backDirection) {
|
||||
// leaving navbar, back direction
|
||||
leavingTitle.fromTo(TRANSLATEX, CENTER, '100%');
|
||||
|
||||
if (enteringHasNavbar) {
|
||||
// leaving navbar, back direction, and there's an entering navbar
|
||||
// should just fade out, no sliding
|
||||
leavingNavbarBg
|
||||
.before.clearStyles([TRANSLATEX])
|
||||
.fadeOut();
|
||||
|
||||
} else {
|
||||
// leaving navbar, back direction, and there's no entering navbar
|
||||
// should just slide out, no fading out
|
||||
leavingNavbarBg
|
||||
.before.clearStyles([OPACITY])
|
||||
.fromTo(TRANSLATEX, CENTER, '100%');
|
||||
}
|
||||
|
||||
let leavingBackBtnText = new Animation(leavingView.backBtnTextRef());
|
||||
leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (300) + 'px');
|
||||
leavingNavBar.add(leavingBackBtnText);
|
||||
|
||||
} else {
|
||||
// leaving navbar, forward direction
|
||||
leavingTitle.fromTo(TRANSLATEX, CENTER, OFF_LEFT);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Transition.register('ios-transition', IOSTransition);
|
||||
65
src/transitions/transition-md.ts
Normal file
65
src/transitions/transition-md.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import {Animation} from '../animations/animation';
|
||||
import {Transition, TransitionOptions} from './transition';
|
||||
import {ViewController} from '../components/nav/view-controller';
|
||||
|
||||
const TRANSLATEY = 'translateY';
|
||||
const OFF_BOTTOM = '40px';
|
||||
const CENTER = '0px';
|
||||
const SHOW_BACK_BTN_CSS = 'show-back-button';
|
||||
|
||||
|
||||
class MDTransition extends Transition {
|
||||
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(opts);
|
||||
|
||||
// what direction is the transition going
|
||||
let backDirection = (opts.direction === 'back');
|
||||
|
||||
// do they have navbars?
|
||||
let enteringHasNavbar = enteringView.hasNavbar();
|
||||
let leavingHasNavbar = leavingView && leavingView.hasNavbar();
|
||||
|
||||
// entering content item moves in bottom to center
|
||||
let enteringPage = new Animation(enteringView.pageRef());
|
||||
enteringPage.before.addClass('show-page');
|
||||
this.add(enteringPage);
|
||||
|
||||
if (backDirection) {
|
||||
this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
|
||||
enteringPage.before.clearStyles([TRANSLATEY]);
|
||||
|
||||
} else {
|
||||
this.duration(opts.duration || 280).easing('cubic-bezier(0.36,0.66,0.04,1)');
|
||||
enteringPage
|
||||
.fromTo(TRANSLATEY, OFF_BOTTOM, CENTER, true)
|
||||
.fadeIn();
|
||||
}
|
||||
|
||||
if (enteringHasNavbar) {
|
||||
let enteringNavBar = new Animation(enteringView.navbarRef());
|
||||
enteringNavBar.before.addClass('show-navbar');
|
||||
this.add(enteringNavBar);
|
||||
|
||||
let enteringBackButton = new Animation(enteringView.backBtnRef());
|
||||
this.add(enteringBackButton);
|
||||
if (enteringView.enableBack()) {
|
||||
enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
|
||||
} else {
|
||||
enteringBackButton.before.removeClass(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)');
|
||||
let leavingPage = new Animation(leavingView.pageRef());
|
||||
this.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fadeOut());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Transition.register('md-transition', MDTransition);
|
||||
63
src/transitions/transition-wp.ts
Normal file
63
src/transitions/transition-wp.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import {Animation} from '../animations/animation';
|
||||
import {Transition, TransitionOptions} from './transition';
|
||||
import {ViewController} from '../components/nav/view-controller';
|
||||
|
||||
const SHOW_BACK_BTN_CSS = 'show-back-button';
|
||||
const SCALE_SMALL = .95;
|
||||
|
||||
|
||||
class WPTransition extends Transition {
|
||||
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(opts);
|
||||
|
||||
// what direction is the transition going
|
||||
let backDirection = (opts.direction === 'back');
|
||||
|
||||
// do they have navbars?
|
||||
let enteringHasNavbar = enteringView.hasNavbar();
|
||||
let leavingHasNavbar = leavingView && leavingView.hasNavbar();
|
||||
|
||||
// entering content scale from smaller to larger
|
||||
let enteringPage = new Animation(enteringView.pageRef());
|
||||
enteringPage.before.addClass('show-page');
|
||||
this.add(enteringPage);
|
||||
|
||||
if (backDirection) {
|
||||
this.duration(opts.duration || 120).easing('cubic-bezier(0.47,0,0.745,0.715)');
|
||||
enteringPage.before.clearStyles(['scale']);
|
||||
|
||||
} else {
|
||||
this.duration(opts.duration || 280).easing('cubic-bezier(0,0 0.05,1)');
|
||||
enteringPage
|
||||
.fromTo('scale', SCALE_SMALL, 1, true)
|
||||
.fadeIn();
|
||||
}
|
||||
|
||||
if (enteringHasNavbar) {
|
||||
let enteringNavBar = new Animation(enteringView.navbarRef());
|
||||
enteringNavBar.before.addClass('show-navbar');
|
||||
this.add(enteringNavBar);
|
||||
|
||||
let enteringBackButton = new Animation(enteringView.backBtnRef());
|
||||
this.add(enteringBackButton);
|
||||
if (enteringView.enableBack()) {
|
||||
enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
|
||||
} else {
|
||||
enteringBackButton.before.removeClass(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)');
|
||||
let leavingPage = new Animation(leavingView.pageRef());
|
||||
this.add(leavingPage.fromTo('scale', 1, SCALE_SMALL).fadeOut());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Transition.register('wp-transition', WPTransition);
|
||||
41
src/transitions/transition.ts
Normal file
41
src/transitions/transition.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import {Animation} from '../animations/animation';
|
||||
import {ViewController} from '../components/nav/view-controller';
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
**/
|
||||
export class Transition extends Animation {
|
||||
|
||||
constructor(opts: TransitionOptions) {
|
||||
super(null, {
|
||||
renderDelay: opts.renderDelay
|
||||
});
|
||||
}
|
||||
|
||||
static createTransition(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions): Transition {
|
||||
let TransitionClass = TransitionRegistry[opts.animation];
|
||||
if (!TransitionClass) {
|
||||
// didn't find a transition animation, default to ios-transition
|
||||
TransitionClass = TransitionRegistry['ios-transition'];
|
||||
}
|
||||
|
||||
return new TransitionClass(enteringView, leavingView, opts);
|
||||
}
|
||||
|
||||
static register(name: string, TransitionClass) {
|
||||
TransitionRegistry[name] = TransitionClass;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export interface TransitionOptions {
|
||||
animation: string;
|
||||
duration: number;
|
||||
easing: string;
|
||||
direction: string;
|
||||
renderDelay?: number;
|
||||
isRTL?: boolean;
|
||||
}
|
||||
|
||||
let TransitionRegistry = {};
|
||||
Reference in New Issue
Block a user