mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
86 lines
1.7 KiB
JavaScript
86 lines
1.7 KiB
JavaScript
import {Transition} from './transition';
|
|
import {Animation} from '../animations/animation';
|
|
|
|
|
|
const DURATION = 600;
|
|
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
|
|
|
|
const OPACITY = 'opacity';
|
|
const TRANSLATEX = 'translateX';
|
|
|
|
const OFF_RIGHT = '100%';
|
|
const OFF_LEFT = '-33%';
|
|
const CENTER = '0%'
|
|
const OFF_OPACITY = 0.8;
|
|
|
|
|
|
class IOSTransition extends Transition {
|
|
|
|
constructor(nav, opts) {
|
|
super(nav, opts);
|
|
|
|
// global duration and easing for all child animations
|
|
this.duration(DURATION);
|
|
this.easing(EASING);
|
|
|
|
// entering item moves to center
|
|
this.enteringView
|
|
.to(TRANSLATEX, CENTER)
|
|
.to(OPACITY, 1);
|
|
|
|
this.enteringTitle
|
|
.fadeIn()
|
|
.to(TRANSLATEX, CENTER);
|
|
|
|
// leaving view moves off screen
|
|
this.leavingView
|
|
.from(TRANSLATEX, CENTER)
|
|
.from(OPACITY, 1);
|
|
|
|
this.leavingTitle
|
|
.from(TRANSLATEX, CENTER)
|
|
.from(OPACITY, 1);
|
|
|
|
// set properties depending on direction
|
|
if (opts.direction === 'back') {
|
|
// back direction
|
|
this.enteringView
|
|
.from(TRANSLATEX, OFF_LEFT)
|
|
.from(OPACITY, OFF_OPACITY)
|
|
.to(OPACITY, 1);
|
|
|
|
this.enteringTitle
|
|
.from(TRANSLATEX, OFF_LEFT);
|
|
|
|
this.leavingView
|
|
.to(TRANSLATEX, OFF_RIGHT)
|
|
.to(OPACITY, 1);
|
|
|
|
this.leavingTitle
|
|
.to(TRANSLATEX, OFF_RIGHT)
|
|
.to(OPACITY, 0);
|
|
|
|
} else {
|
|
// forward direction
|
|
this.enteringView
|
|
.from(TRANSLATEX, '99%')
|
|
.from(OPACITY, 1);
|
|
|
|
this.enteringTitle
|
|
.from(TRANSLATEX, '97%');
|
|
|
|
this.leavingView
|
|
.to(TRANSLATEX, OFF_LEFT)
|
|
.to(OPACITY, OFF_OPACITY);
|
|
|
|
this.leavingTitle
|
|
.to(TRANSLATEX, OFF_LEFT)
|
|
.to(OPACITY, 0);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Transition.register('ios', IOSTransition);
|