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

fix(toast): only use constant and env if supported (#14399)

Browse Source
This commit is contained in:
Brandy Carney
2018-04-27 11:53:56 -04:00
committed by GitHub
parent 329a34892b
commit 9bee0f0879
2 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/toast/animations/ios.enter.ts
View File

@@ -10,9 +10,20 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
let variable;
if (CSS.supports('bottom', 'env(safe-area-inset-bottom)')) {
variable = 'env';
} else if (CSS.supports('bottom', 'constant(safe-area-inset-bottom)')) {
variable = 'constant';
}
const bottom = variable ? 'calc(-10px - ' + variable + '(safe-area-inset-bottom))' : '-10px';
const top = variable ? 'calc(' + variable + '(safe-area-inset-top) + 10px)' : '10px';
switch (position) {
case 'top':
wrapperAnimation.fromTo('translateY', '-100%', 'calc(env(safe-area-inset-top) + 10px)');
wrapperAnimation.fromTo('translateY', '-100%', top);
break;
case 'middle':
const topPosition = Math.floor(
@@ -22,7 +33,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
wrapperAnimation.fromTo('opacity', 0.01, 1);
break;
default:
wrapperAnimation.fromTo('translateY', '100%', 'calc(-10px - env(safe-area-inset-bottom))');
wrapperAnimation.fromTo('translateY', '100%', bottom);
break;
}
return Promise.resolve(baseAnimation

16
core/src/components/toast/animations/ios.leave.ts
View File

@@ -9,15 +9,27 @@ export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElem
const wrapperAnimation = new Animation();
const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
let variable;
if (CSS.supports('bottom', 'env(safe-area-inset-bottom)')) {
variable = 'env';
} else if (CSS.supports('bottom', 'constant(safe-area-inset-bottom)')) {
variable = 'constant';
}
const bottom = variable ? 'calc(-10px - ' + variable + '(safe-area-inset-bottom))' : '-10px';
const top = variable ? 'calc(' + variable + '(safe-area-inset-top) + 10px)' : '10px';
switch (position) {
case 'top':
wrapperAnimation.fromTo('translateY', 'calc(env(safe-area-inset-top) + 10px)', '-100%');
wrapperAnimation.fromTo('translateY', top, '-100%');
break;
case 'middle':
wrapperAnimation.fromTo('opacity', 0.99, 0);
break;
default:
wrapperAnimation.fromTo('translateY', 'calc(-10px - env(safe-area-inset-bottom))', '100%');
wrapperAnimation.fromTo('translateY', bottom, '100%');
break;
}
return Promise.resolve(baseAnimation