javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ios): translucent toolbar blur no longer obscures entering page title (#20314)

Browse Source 
fixes #19158
This commit is contained in:
Liam DeBeasi
2020-01-29 15:12:00 -05:00
committed by GitHub
parent 1e2946e0f9
commit e580b88477
5 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/footer/footer.ios.scss
View File

@ -9,13 +9,15 @@
}
@supports (backdrop-filter: blur(0)) {
.footer-translucent-ios {
.footer-background {
@include position(0, 0, 0, 0);
position: absolute;
backdrop-filter: $footer-ios-translucent-filter;
}
.footer-translucent-ios ion-toolbar {
--opacity: .8;
--backdrop-filter: #{$footer-ios-translucent-filter};
}
}

4
core/src/components/footer/footer.tsx
View File

@ -40,6 +40,10 @@ export class Footer implements ComponentInterface {
[`footer-translucent-${mode}`]: translucent,
}}
>
{ mode === 'ios' && translucent &&
<div class="footer-background"></div>
}
<slot></slot>
</Host>
);
}

8
core/src/components/header/header.ios.scss
View File

@ -9,13 +9,15 @@
}
@supports (backdrop-filter: blur(0)) {
.header-translucent-ios {
.header-background {
@include position(0, 0, 0, 0);
position: absolute;
backdrop-filter: $header-ios-translucent-filter;
}
.header-translucent-ios ion-toolbar {
--opacity: .8;
--backdrop-filter: #{$header-ios-translucent-filter};
}
}

5
core/src/components/header/header.tsx
View File

@ -141,6 +141,7 @@ export class Header implements ComponentInterface {
}
render() {
const { translucent } = this;
const mode = getIonMode(this);
const collapse = this.collapse || 'none';
return (
@ -157,6 +158,10 @@ export class Header implements ComponentInterface {
[`header-translucent-${mode}`]: this.translucent,
}}
>
{ mode === 'ios' && translucent &&
<div class="header-background"></div>
}
<slot></slot>
</Host>
);
}

21
core/src/utils/transition/ios.transition.ts
View File

@ -342,10 +342,14 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
}
enteringToolBarItems.fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
enteringToolBarBg.beforeClearStyles([OPACITY, 'transform']);
enteringToolBarBg
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, 0.01, 1);
const translucentHeader = parentHeader?.translucent;
if (!translucentHeader) {
enteringToolBarBg.fromTo(OPACITY, 0.01, 1);
} else {
enteringToolBarBg.fromTo('transform', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'), 'translateX(0px)');
}
// forward direction, entering page has a back button
if (!forward) {
@ -479,12 +483,15 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
}
leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
// leaving toolbar, back direction, and there's no entering toolbar
// should just slide out, no fading out
leavingToolBarBg
.beforeClearStyles([OPACITY])
.fromTo(OPACITY, 1, 0.01);
const translucentHeader = parentHeader?.translucent;
if (!translucentHeader) {
leavingToolBarBg.fromTo(OPACITY, 0.99, 0);
} else {
leavingToolBarBg.fromTo('transform', 'translateX(0px)', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
}
if (backButtonEl && !backward) {
const leavingBackBtnText = createAnimation();