javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +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(); const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper')); 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%'); wrapperAnimation.fromTo('translateY', '100%', '0%');
const ani = baseAnimation 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(); const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper')); wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.26, 0); backdropAnimation.fromTo('opacity', 0.32, 0);
wrapperAnimation.fromTo('translateY', '0%', '100%'); wrapperAnimation.fromTo('translateY', '0%', '100%');
const ani = baseAnimation 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(); const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper')); 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); 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(); const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper')); wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
backdropAnimation.fromTo('opacity', 0.5, 0); backdropAnimation.fromTo('opacity', 0.32, 0);
wrapperAnimation.fromTo('opacity', 0.99, 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(); const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')); 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); 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(); const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')); 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); 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'; openedX = '0px';
} }
const menuAni = new AnimationC() const menuAnimation = new AnimationC()
.addElement(menu.menuInnerEl) .addElement(menu.menuInnerEl)
.fromTo('translateX', closedX, openedX); .fromTo('translateX', closedX, openedX);
const backdropAni = new AnimationC() const backdropAnimation = new AnimationC()
.addElement(menu.backdropEl) .addElement(menu.backdropEl)
.fromTo('opacity', 0.01, 0.3); .fromTo('opacity', 0.01, 0.32);
return baseAnimation(AnimationC).then(animation => { return baseAnimation(AnimationC).then(animation => {
return animation.add(menuAni) return animation.add(menuAnimation)
.add(backdropAni); .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'; contentOpenedX = width + 'px';
menuClosedX = -width + 'px'; menuClosedX = -width + 'px';
} }
const menuAni = new AnimationC() const menuAnimation = new AnimationC()
.addElement(menu.menuInnerEl) .addElement(menu.menuInnerEl)
.fromTo('translateX', menuClosedX, '0px'); .fromTo('translateX', menuClosedX, '0px');
const contentAni = new AnimationC() const contentAnimation = new AnimationC()
.addElement(menu.contentEl) .addElement(menu.contentEl)
.fromTo('translateX', '0px', contentOpenedX); .fromTo('translateX', '0px', contentOpenedX);
const backdropAni = new AnimationC() const backdropAnimation = new AnimationC()
.addElement(menu.backdropEl) .addElement(menu.backdropEl)
.fromTo('opacity', 0.01, 0.2); .fromTo('opacity', 0.01, 0.32);
return baseAnimation(AnimationC).then(animation => { return baseAnimation(AnimationC).then(animation => {
return animation.add(menuAni) return animation.add(menuAnimation)
.add(backdropAni) .add(backdropAnimation)
.add(contentAni); .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('opacity', 0.01, 1)
.fromTo('translateY', '40px', '0px'); .fromTo('translateY', '40px', '0px');
backdropAnimation.fromTo('opacity', 0.01, 0.4); backdropAnimation.fromTo('opacity', 0.01, 0.32);
return Promise.resolve(baseAnimation return Promise.resolve(baseAnimation
.addElement(baseEl) .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('opacity', 0.99, 0)
.fromTo('translateY', '0px', '40px'); .fromTo('translateY', '0px', '40px');
backdropAnimation.fromTo('opacity', 0.4, 0.0); backdropAnimation.fromTo('opacity', 0.32, 0.0);
return Promise.resolve(baseAnimation return Promise.resolve(baseAnimation
.addElement(baseEl) .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(); const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')); backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
backdropAnimation.fromTo('opacity', 0.01, 0.08); backdropAnimation.fromTo('opacity', 0.01, 0.32);
const wrapperAnimation = new AnimationC(); const wrapperAnimation = new AnimationC();
wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper')); 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.addElement(baseEl.querySelector('.popover-wrapper'));
wrapperAnimation.fromTo('opacity', 0.99, 0); wrapperAnimation.fromTo('opacity', 0.99, 0);
backdropAnimation.fromTo('opacity', 0.08, 0); backdropAnimation.fromTo('opacity', 0.32, 0);
return Promise.resolve(baseAnimation return Promise.resolve(baseAnimation
.addElement(baseEl) .addElement(baseEl)