javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(overlays): add global backdrop opacity variable for animations (#19533)

Browse Source 
adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control

closes #16446
This commit is contained in:
Brandy Carney
2019-10-08 16:42:37 -04:00
parent 3dd5f05760
commit bd22926c49
49 changed files with 136 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.01, 0.3);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper')!)

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

@ -11,7 +11,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.3, 0);
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper')!)

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

@ -11,7 +11,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.01, 0.32);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper')!)

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

@ -11,7 +11,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.32, 0);
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper')!)