javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

transition updates

Browse Source
This commit is contained in:
Adam Bradley
2015-05-05 14:03:10 -05:00
parent 3a1054eb84
commit a134551321
4 changed files with 128 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
ionic/transitions/ios-transition.js
View File

@@ -6,6 +6,12 @@ import {Transition} from './transition'
const EASING_FN = [.36, .66, .04, 1];
const DURATION = 500;
const OFF_RIGHT = '100%';
const OFF_LEFT = '-33%';
const OFF_OPACITY = 0.8;
const TRANSLATE_X = 'translateX';
const OPACITY = 'opacity';
class IOSTransition extends Animation {
@@ -13,6 +19,7 @@ class IOSTransition extends Animation {
constructor(navCtrl, opts) {
super();
// global duration and easing for all child animations
this.duration(DURATION);
this.easing('ios');
@@ -20,30 +27,52 @@ class IOSTransition extends Animation {
this.enteringItem = navCtrl.getStagedEnteringItem();
this.leavingItem = navCtrl.getStagedLeavingItem();
// create animation for entering item
let enteringItemAnimation = new Animation();
enteringItemAnimation.elements(this.enteringItem.navItem.domElement);
// create animation for the entering item
let enteringItemAnimation = new Animation(this.enteringItem.navItem.domElement);
// show the item
this.enteringItem.navItem.domElement.style.display = 'block';
// create animation for the leaving item
// leavingItem could be null, but the animation instance knows to do nothing
let leavingItemAnimation = new Animation(this.leavingItem && this.leavingItem.navItem.domElement);
// entering item moves to center
// before starting, set enteringItem to display: block
enteringItemAnimation
.display('block')
.to(TRANSLATE_X, 0)
.to(OPACITY, 1);
// leaving view moves off screen
// when completed, set leavingItem to display: none
leavingItemAnimation
.from(TRANSLATE_X, 0)
.from(OPACITY, 1)
.display('none');
// set properties depending on direction
if (opts.direction === 'back') {
// back direction
this.enteringItem.navItem.domElement.style.transform = 'translateX(-33%)';
if (this.leavingItem) {
this.leavingItem.navItem.domElement.style.display = '';
}
enteringItemAnimation
.from(TRANSLATE_X, OFF_LEFT)
.from(OPACITY, OFF_OPACITY)
.to(OPACITY, 1);
leavingItemAnimation
.to(TRANSLATE_X, OFF_RIGHT)
.to(OPACITY, 1);
} else {
// forward direction
this.enteringItem.navItem.domElement.style.transform = 'translateX(100%)';
enteringItemAnimation
.from(TRANSLATE_X, OFF_RIGHT)
.from(OPACITY, 1);
leavingItemAnimation
.to(TRANSLATE_X, OFF_LEFT)
.to(OPACITY, OFF_OPACITY);
}
// entering item moves to dead center
enteringItemAnimation.to('translateX', ['0%', '100%']);
this.addChild(enteringItemAnimation);
// set child animations
this.setChildren([enteringItemAnimation, leavingItemAnimation]);
}
stage() {