/
md.transition.ts
74 lines (61 loc) · 2.22 KB
/
md.transition.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { IonicAnimation } from '../../interface';
import { createAnimation } from '../animation/animation';
import { TransitionOptions } from '../transition';
export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions): IonicAnimation => {
const OFF_BOTTOM = '40px';
const CENTER = '0px';
const backDirection = (opts.direction === 'back');
const enteringEl = opts.enteringEl;
const leavingEl = opts.leavingEl;
const ionPageElement = getIonPageElement(enteringEl);
const enteringToolbarEle = ionPageElement.querySelector('ion-toolbar');
const rootTransition = createAnimation();
rootTransition
.addElement(ionPageElement)
.fill('both')
.beforeRemoveClass('ion-page-invisible');
// animate the component itself
if (backDirection) {
rootTransition
.duration(opts.duration || 200)
.easing('cubic-bezier(0.47,0,0.745,0.715)');
} else {
rootTransition
.duration(opts.duration || 280)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.fromTo('transform', `translateY(${OFF_BOTTOM})`, `translateY(${CENTER})`)
.fromTo('opacity', 0.01, 1);
}
// Animate toolbar if it's there
if (enteringToolbarEle) {
const enteringToolBar = createAnimation();
enteringToolBar.addElement(enteringToolbarEle);
rootTransition.addAnimation(enteringToolBar);
}
// setup leaving view
if (leavingEl && backDirection) {
// leaving content
rootTransition
.duration(opts.duration || 200)
.easing('cubic-bezier(0.47,0,0.745,0.715)');
const leavingPage = createAnimation();
leavingPage
.addElement(getIonPageElement(leavingEl))
.afterStyles({ 'display': 'none' })
.fromTo('transform', `translateY(${CENTER})`, `translateY(${OFF_BOTTOM})`)
.fromTo('opacity', 1, 0);
rootTransition.addAnimation(leavingPage);
}
return rootTransition;
};
const getIonPageElement = (element: HTMLElement) => {
if (element.classList.contains('ion-page')) {
return element;
}
const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
if (ionPage) {
return ionPage;
}
// idk, return the original element so at least something animates and we don't have a null pointer
return element;
};