javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(backdrop): update opacity to match MD spec (#16188)

Browse Source
This commit is contained in:
Brandy Carney
2018-11-04 14:04:06 -05:00
committed by GitHub
parent e416c23b3b
commit 3c9ed3166d
12 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/action-sheet/animations/md.enter.ts
View File

@ -13,7 +13,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.26);
backdropAnimation.fromTo('opacity', 0.01, 0.32);
wrapperAnimation.fromTo('translateY', '100%', '0%');
const ani = baseAnimation

2
core/src/components/action-sheet/animations/md.leave.ts
View File

@ -13,7 +13,7 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.26, 0);
backdropAnimation.fromTo('opacity', 0.32, 0);
wrapperAnimation.fromTo('translateY', '0%', '100%');
const ani = baseAnimation

2
core/src/components/alert/animations/md.enter.ts
View File

@ -12,7 +12,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.5);
backdropAnimation.fromTo('opacity', 0.01, 0.32);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 0.9, 1);

2
core/src/components/alert/animations/md.leave.ts
View File

@ -12,7 +12,7 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
backdropAnimation.fromTo('opacity', 0.5, 0);
backdropAnimation.fromTo('opacity', 0.32, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0);

2
core/src/components/loading/animations/md.enter.ts
View File

@ -12,7 +12,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.5);
backdropAnimation.fromTo('opacity', 0.01, 0.32);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);

2
core/src/components/loading/animations/md.leave.ts
View File

@ -12,7 +12,7 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.5, 0);
backdropAnimation.fromTo('opacity', 0.32, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);

10
core/src/components/menu-controller/animations/overlay.ts
View File

@ -23,16 +23,16 @@ export function menuOverlayAnimation(AnimationC: Animation, _: HTMLElement, menu
openedX = '0px';
}
const menuAni = new AnimationC()
const menuAnimation = new AnimationC()
.addElement(menu.menuInnerEl)
.fromTo('translateX', closedX, openedX);
const backdropAni = new AnimationC()
const backdropAnimation = new AnimationC()
.addElement(menu.backdropEl)
.fromTo('opacity', 0.01, 0.3);
.fromTo('opacity', 0.01, 0.32);
return baseAnimation(AnimationC).then(animation => {
return animation.add(menuAni)
.add(backdropAni);
return animation.add(menuAnimation)
.add(backdropAnimation);
});
}

14
core/src/components/menu-controller/animations/push.ts
View File

@ -21,21 +21,21 @@ export function menuPushAnimation(AnimationC: Animation, _: HTMLElement, menu: M
contentOpenedX = width + 'px';
menuClosedX = -width + 'px';
}
const menuAni = new AnimationC()
const menuAnimation = new AnimationC()
.addElement(menu.menuInnerEl)
.fromTo('translateX', menuClosedX, '0px');
const contentAni = new AnimationC()
const contentAnimation = new AnimationC()
.addElement(menu.contentEl)
.fromTo('translateX', '0px', contentOpenedX);
const backdropAni = new AnimationC()
const backdropAnimation = new AnimationC()
.addElement(menu.backdropEl)
.fromTo('opacity', 0.01, 0.2);
.fromTo('opacity', 0.01, 0.32);
return baseAnimation(AnimationC).then(animation => {
return animation.add(menuAni)
.add(backdropAni)
.add(contentAni);
return animation.add(menuAnimation)
.add(backdropAnimation)
.add(contentAnimation);
});
}

2
core/src/components/modal/animations/md.enter.ts
View File

@ -16,7 +16,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
.fromTo('opacity', 0.01, 1)
.fromTo('translateY', '40px', '0px');
backdropAnimation.fromTo('opacity', 0.01, 0.4);
backdropAnimation.fromTo('opacity', 0.01, 0.32);
return Promise.resolve(baseAnimation
.addElement(baseEl)

2
core/src/components/modal/animations/md.leave.ts
View File

@ -17,7 +17,7 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
.fromTo('opacity', 0.99, 0)
.fromTo('translateY', '0px', '40px');
backdropAnimation.fromTo('opacity', 0.4, 0.0);
backdropAnimation.fromTo('opacity', 0.32, 0.0);
return Promise.resolve(baseAnimation
.addElement(baseEl)

2
core/src/components/popover/animations/md.enter.ts
View File

@ -71,7 +71,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev?
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
backdropAnimation.fromTo('opacity', 0.01, 0.08);
backdropAnimation.fromTo('opacity', 0.01, 0.32);
const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));

2
core/src/components/popover/animations/md.leave.ts
View File

@ -13,7 +13,7 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): Pr
wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
wrapperAnimation.fromTo('opacity', 0.99, 0);
backdropAnimation.fromTo('opacity', 0.08, 0);
backdropAnimation.fromTo('opacity', 0.32, 0);
return Promise.resolve(baseAnimation
.addElement(baseEl)